CODEWITHSUNDEEP
javascripthtmlcsscanvascss-position
aglowacki
aglowacki

Reputation: 43

Insert HTML via JavaScript

I'm attempting to insert a 'Free Draw Box' into my webpage only using JavaScript. I've been able to get my 'Free Draw Box Script' to work on the page with the HTML present, but I would like to accomplish this by inserting the HTML via JavaScript instead. I've included a snippet of my entire code, however, I believe that the code in question is towards the bottom- commented as 'Insert HTML.' Where is my mistake?

<html>

    <script type="text/javascript">

    /*Free Draw Box Script*/
    var canvas, ctx, flag = false,
        prevX = 0,
        currX = 0,
        prevY = 0,
        currY = 0,
        dot_flag = false;

    var x = "black",
        y = 2;
    
    function init() {
        canvas = document.getElementById('can');
        ctx = canvas.getContext("2d");
        w = canvas.width;
        h = canvas.height;
    
        canvas.addEventListener("mousemove", function (e) {
            findxy('move', e)
        }, false);
        canvas.addEventListener("mousedown", function (e) {
            findxy('down', e)
        }, false);
        canvas.addEventListener("mouseup", function (e) {
            findxy('up', e)
        }, false);
        canvas.addEventListener("mouseout", function (e) {
            findxy('out', e)
        }, false);
    }
    
    function draw() {
        ctx.beginPath();
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        ctx.strokeStyle = x;
        ctx.lineWidth = y;
        ctx.stroke();
        ctx.closePath();
    }
    
    function erase() {
        var m = confirm("Are you sure you want to clear the Signature?");
        if (m) {
            ctx.clearRect(0, 0, w, h);
            document.getElementById("canvasimg").style.display = "none";
        }
    }
    
    function save() {
        document.getElementById("canvasimg").style.border = "2px solid";
        var dataURL = canvas.toDataURL();
        document.getElementById("canvasimg").src = dataURL;
        document.getElementById("canvasimg").style.display = "inline";
    }
    
    function findxy(res, e) {
        if (res == 'down') {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;
    
            flag = true;
            dot_flag = true;
            if (dot_flag) {
                ctx.beginPath();
                ctx.fillStyle = x;
                ctx.fillRect(currX, currY, 2, 2);
                ctx.closePath();
                dot_flag = false;
            }
        }
        if (res == 'up' || res == "out") {
            flag = false;
        }
        if (res == 'move') {
            if (flag) {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
                draw();
            }
        }
    }

    /*Insert HTML*/
    document.body.innerHTML += '
        <body onload="init()">
            <canvas id="can" width="800" height="200" 
            style="position:absolute;top:10%;left:10%;border:1px solid;">
            </canvas>

            <img id="canvasimg" style="position:absolute;top:10%;
            left:52%;" style="display:none;">
            <input type="button" value="clear" id="clr" size="23" 
            onclick="erase()" style="position:absolute;top:55%;
            left:15%;">
        </body>
    ';

    </script>

    <body>
        <p></p>
    </body>

    </html>

Upvotes: 1

Views: 157

Answers (3)

kukkuz
kukkuz

Reputation: 42370

I wouldn't recommend putting in html as such using JS, but well here is the fix:

  1. Use template literals for the html string.
  2. Also use outerHTML to put in the body element from the string too.

See demo below:

var canvas,ctx,flag=!1,prevX=0,currX=0,prevY=0,currY=0,dot_flag=!1;var x="black",y=2;function init(){canvas=document.getElementById('can');ctx=canvas.getContext("2d");w=canvas.width;h=canvas.height;canvas.addEventListener("mousemove",function(e){findxy('move',e)},!1);canvas.addEventListener("mousedown",function(e){findxy('down',e)},!1);canvas.addEventListener("mouseup",function(e){findxy('up',e)},!1);canvas.addEventListener("mouseout",function(e){findxy('out',e)},!1)}
function draw(){ctx.beginPath();ctx.moveTo(prevX,prevY);ctx.lineTo(currX,currY);ctx.strokeStyle=x;ctx.lineWidth=y;ctx.stroke();ctx.closePath()}
function erase(){var m=confirm("Are you sure you want to clear the Signature?");if(m){ctx.clearRect(0,0,w,h);document.getElementById("canvasimg").style.display="none"}}
function save(){document.getElementById("canvasimg").style.border="2px solid";var dataURL=canvas.toDataURL();document.getElementById("canvasimg").src=dataURL;document.getElementById("canvasimg").style.display="inline"}
function findxy(res,e){if(res=='down'){prevX=currX;prevY=currY;currX=e.clientX-canvas.offsetLeft;currY=e.clientY-canvas.offsetTop;flag=!0;dot_flag=!0;if(dot_flag){ctx.beginPath();ctx.fillStyle=x;ctx.fillRect(currX,currY,2,2);ctx.closePath();dot_flag=!1}}
if(res=='up'||res=="out"){flag=!1}
if(res=='move'){if(flag){prevX=currX;prevY=currY;currX=e.clientX-canvas.offsetLeft;currY=e.clientY-canvas.offsetTop;draw()}}}

/*Insert HTML*/
document.body.outerHTML += `<body onload="init()">
            <canvas id="can" width="800" height="200" 
  style="position:absolute;top:10%;left:10%;border:1px solid;">
            </canvas>
            <img id="canvasimg" style="position:absolute;top:10%;
            left:52%;" style="display:none;">
            <input type="button" value="clear" id="clr" size="23" 
            onclick="erase()" style="position:absolute;top:55%;
            left:15%;">
        </body>`;

Upvotes: 1

Jonas Wilms
Jonas Wilms

Reputation: 138537

Adding a body into the body wont work, and its onload function does not get called. Instead, create the DOM directly using js, then add it to the page. So to create the canvas you would do:

var can = document.createElement("canvas");
can.width = 800;
can.height = 200;
document.body.appendChild(can);

//you can use it directly
var ctx = can.getContext("2d");

Upvotes: 0

tibetty
tibetty

Reputation: 563

<html>

    <script type="text/javascript">

    /*Free Draw Box Script*/
    var canvas, ctx, flag = false,
        prevX = 0,
        currX = 0,
        prevY = 0,
        currY = 0,
        dot_flag = false;

    var x = "black",
        y = 2;
    
    function init() {
        canvas = document.getElementById('can');
        ctx = canvas.getContext("2d");
        w = canvas.width;
        h = canvas.height;
    
        canvas.addEventListener("mousemove", function (e) {
            findxy('move', e)
        }, false);
        canvas.addEventListener("mousedown", function (e) {
            findxy('down', e)
        }, false);
        canvas.addEventListener("mouseup", function (e) {
            findxy('up', e)
        }, false);
        canvas.addEventListener("mouseout", function (e) {
            findxy('out', e)
        }, false);
    }
    
    function draw() {
        ctx.beginPath();
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        ctx.strokeStyle = x;
        ctx.lineWidth = y;
        ctx.stroke();
        ctx.closePath();
    }
    
    function erase() {
        var m = confirm("Are you sure you want to clear the Signature?");
        if (m) {
            ctx.clearRect(0, 0, w, h);
            document.getElementById("canvasimg").style.display = "none";
        }
    }
    
    function save() {
        document.getElementById("canvasimg").style.border = "2px solid";
        var dataURL = canvas.toDataURL();
        document.getElementById("canvasimg").src = dataURL;
        document.getElementById("canvasimg").style.display = "inline";
    }
    
    function findxy(res, e) {
        if (res == 'down') {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;
    
            flag = true;
            dot_flag = true;
            if (dot_flag) {
                ctx.beginPath();
                ctx.fillStyle = x;
                ctx.fillRect(currX, currY, 2, 2);
                ctx.closePath();
                dot_flag = false;
            }
        }
        if (res == 'up' || res == "out") {
            flag = false;
        }
        if (res == 'move') {
            if (flag) {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
                draw();
            }
        }
    }

    /*Insert HTML*/
    document.body.innerHTML += `
        <body onload="init()">
            <canvas id="can" width="800" height="200" 
            style="position:absolute;top:10%;left:10%;border:1px solid;">
            </canvas>

            <img id="canvasimg" style="position:absolute;top:10%;
            left:52%;" style="display:none;">
            <input type="button" value="clear" id="clr" size="23" 
            onclick="erase()" style="position:absolute;top:55%;
            left:15%;">
        </body>
    `;

    </script>

    <body>
        <p></p>
    </body>

    </html>

Upvotes: 0

Related Questions