I'm having issues with my Javascript drawing about 300 pixels to the right and 100 pixels below where my cursor is located upon a draw event.
I've looked over several other similar questions trying different methods like clientX/Y but none have worked. Any help would be appreciated. Here is my code:
My canvas element:
<canvas id="can" width="1000" height="1000"></canvas>
These variables are initialized outside my functions:
var canvas, ctx, flag = false,
prevX = 0,
currX = 0,
prevY = 0,
currY = 0,
dot_flag = false;
var x = "black",
y = 2;
My init function:
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);
}
Calculates where to draw:
function findxy(res, e) {
if (res == 'down') {
prevX = currX;
prevY = currY;
currX = e.pageX - canvas.offsetLeft;
currY = e.pageY - canvas.offsetTop;
console.log(e.pageX + " " + e.pageY);
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.pageX - canvas.offsetLeft;
currY = e.pageY - canvas.offsetTop;
draw();
}
}
}
My Draw Function
function draw() {
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = x;
ctx.lineWidth = y;
ctx.stroke();
ctx.closePath();
}
Seems to be working as intended. I assumed at first it had something to do with the fact that your canvas wasn't at 0,0 of your screen but after testing that, it still worked as intended.
You'll need to provide more information regarding how you implemented these functions.
var canvas, ctx, flag = false,
prevX = 0,
currX = 0,
prevY = 0,
currY = 0,
dot_flag = false;
var x = "black",
y = 2;
function draw() {
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = x;
ctx.lineWidth = y;
ctx.stroke();
ctx.closePath();
}
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 findxy(res, e) {
if (res == 'down') {
prevX = currX;
prevY = currY;
currX = e.pageX - canvas.offsetLeft;
currY = e.pageY - canvas.offsetTop;
console.log(e.pageX + " " + e.pageY);
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.pageX - canvas.offsetLeft;
currY = e.pageY - canvas.offsetTop;
draw();
}
}
}
init();
<canvas id="can" width="1000" height="1000"></canvas>
Related
The aim is to able to write using mouse movement on video on pause.
I am using an HTML5 Video tag to play video.
I am able to play the video without any issue, apart from playing video I need to write able to draw on video on the pause of the video
I am able to write on canvas. But when I have a video tag in canvas, I am NOT able to view any of my drawings.
Can you please let me know, what I am doing wrong?
Below is the code:
<html>
<!-- <body onload="init()"> -->
<body>
<canvas id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;">
</canvas>
<video id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;">
<source src="Test.mp4" type="video/mp4">
</video>
</body>
<script type="text/javascript">
var canvas, ctx, flag = false,
prevX = 0,
currX = 0,
prevY = 0,
currY = 0,
dot_flag = false;
var x = "black",
y = 2;
//# must await page load via JS (before using JS functions)...
addEventListener("load", init );
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("Want to clear");
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").src = canvas.toDataURL();
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();
}
}
}
function color(obj)
{
switch (obj.id)
{
case "green": x = "green"; break;
case "blue": x = "blue"; break;
case "red": x = "red"; break;
case "yellow": x = "yellow"; break;
case "orange": x = "orange"; break;
case "black":
x = "black";
break;
case "white":
x = "white";
break;
}
if (x == "white") y = 14;
else y = 2;
}
</script>
</html>
I just used some codes to design a Canvas ( HTML and JavaScript) on which my customers can write their signatures from a computer(with mouse) or a cell phone(with finger touch). After I run these codes, I found 2 issues.
The first issue is that the mouse can not draw a line ( just showed a dot on the beginning of each line I wanted to draw).
The Second issue is that when I used finger to draw a line on the cell phone, the position of the line is not where I want it to display. Can anybody help me to take a look at these 2 issues? Many Thanks!
var canvas, ctx, flag, dot_flag = false,
prevX = 0,
currX = 0,
prevY = 0,
currY = 0,
lastPt = null,
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);
canvas.addEventListener("touchmove", draw, false);
canvas.addEventListener("touchend", end, false);
}
function draw() {
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = x;
ctx.lineWidth = y;
ctx.stroke();
ctx.closePath();
}
function draw(e) {
e.preventDefault();
if (lastPt != null) {
ctx.beginPath();
ctx.moveTo(lastPt.x, lastPt.y);
ctx.lineTo(e.touches[0].pageX, e.touches[0].pageY);
ctx.stroke();
}
lastPt = {
x: e.touches[0].pageX,
y: e.touches[0].pageY
};
}
function end(e) {
e.preventDefault();
// Terminate touch path
lastPt = null;
}
function erase() {
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";
document.getElementById("can").style.display = "none";
}
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();
}
}
}
<html>
<body onload="init()">
<canvas id="can" width="400" height="400" style="border-style: solid; border-color: inherit; border-width: 2px; position:absolute;top:9%; left:12%;"></canvas>
<img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;">
<input type="button" value="确认" id="btn" size="30" onclick="save()" style="position:absolute;top:55%;left:10%;">
<input type="button" value="清除" id="clr" size="23" onclick="erase()" style="position:absolute;top:55%;left:15%;">
</body>
</html>
I have a canvas in which, is drawn an element svg (example a circle), the user is responsible for drawing with the mouse through this figure, I save the dots x and y drawn by the user in an array, but I dont know how to get the dots only from svg stroke.
My problem is:
Using isPointInStroke() I can see if the point is in the stroke but If I don't have the total points array of the stroke, it's impossible to know if the user has drawn 100% of the SVG figure. In the previous way if the user draws half of the drawing but correctly, it would give me 100% success.
function init() {
canvas = document.getElementById('can');
ctx = canvas.getContext("2d");
w = canvas.width;
h = canvas.height;
var svgPathCirculo=" M125,200a75,75 0 1,0 150,0a75,75 0 1,0 -150,0";
var circulo = new Path2D(svgPathCirculo);
ctx.lineWidth = 5;
ctx.setLineDash([5, 15]);
ctx.stroke(circulo);
// Just example to check if it works
if(ctx.isPointInStroke(circulo, 125, 200)){
ctx.arc(200,200,3,0,2*Math.PI);
ctx.fill();
};
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);
}
I use the canvas to draw on it and svg to display predefined shapes for the user to follow as a template while drawing (such as drawing booklets for young children).
function draw() {
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = x;
ctx.lineWidth = y;
ctx.stroke();
ctx.closePath();
}
function findxy(res, e) {
if (res == 'down') {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
if(!arrayCoordenadas.includes({x:currX,y:currY})){
arrayCoordenadas.push({x:currX,y:currY});
}
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;
if(!arrayCoordenadas.includes({x:currX,y:currY})){
arrayCoordenadas.push({x:currX,y:currY});
}
draw();
}
}
}
I need to know each of the x and y coordinates of the svg stroke path.
Example: Example of what I mean
I've added a function to detect the mouse position in the canvas and now currX became curr.x ... etc
If you are using Path2Dthis is how you detect if a point {x,y} is in the stroke:
ctx.isPointInStroke(the_path, x, y)
Next comes my code. The user can draw only inside the stroke.
Now the code is working but I don't think you may know if the user has drawn 100% of the SVG figure. You may push the points inside the array of points and calculate the length of the path, and compare it with the length of the circle, but I don't think this would do.
let prev = {},
curr = {};
let flag = false;
let circulo;
function init() {
canvas = document.getElementById("can");
ctx = canvas.getContext("2d");
w = canvas.width = 400;
h = canvas.height = 400;
var svgPathCirculo = "M125,200a75,75 0 1,0 150,0a75,75 0 1,0 -150,0";
circulo = new Path2D(svgPathCirculo);
ctx.lineWidth =10;
ctx.setLineDash([5, 15]);
ctx.stroke(circulo);
canvas.addEventListener("mousemove", move, false);
canvas.addEventListener("mousedown", down, false);
canvas.addEventListener("mouseup", up, false);
canvas.addEventListener("mouseout", up, false);
}
function draw(prev, curr, trazado) {
ctx.setLineDash([]); //unset linedash
ctx.lineCap = "round";
ctx.strokeStyle = "gold"
ctx.lineWidth =5;
if (
ctx.isPointInStroke(trazado, curr.x, curr.y) &&
ctx.isPointInStroke(trazado, prev.x, prev.y)
) {
ctx.beginPath();
ctx.moveTo(prev.x, prev.y);
ctx.lineTo(curr.x, curr.y);
ctx.stroke();
}
}
function down(e) {
prev = oMousePos(canvas, e);
curr = oMousePos(canvas, e);
flag = true;
}
function up(e) {
flag = false;
}
function move(e) {
if (flag) {
curr = oMousePos(canvas, e);
draw(prev, curr, circulo);
prev = { x: curr.x, y: curr.y };
}
}
function oMousePos(canvas, evt) {
var ClientRect = canvas.getBoundingClientRect();
return {
//objeto
x: Math.round(evt.clientX - ClientRect.left),
y: Math.round(evt.clientY - ClientRect.top)
};
}
init();
canvas{border:1px solid}
<canvas id="can"></canvas>
I have used the following code draw on canvas during the mouse move.
<script type="text/javascript">
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 color(obj) {
switch (obj.id) {
case "green":
x = "green";
break;
case "blue":
x = "blue";
break;
case "red":
x = "red";
break;
case "yellow":
x = "yellow";
break;
case "orange":
x = "orange";
break;
case "black":
x = "black";
break;
case "white":
x = "white";
break;
}
if (x == "white") y = 14;
else y = 2;
}
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("Want to clear");
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();
}
}
}
</script>
<div class="content-wrapper" onmousemove="init()" style="width: 50%;
float: left;">
<canvas id="can" width="400" height="200" style="border:2px solid;">
</canvas>
</div>
It doesn't draw exactly at the mouse point when I have scrolled down the web page. That is it draws something, but not at the mouse point if I have scrolled down through the web page.
I want to avoid that, and it should draw at the mouse point even after I have scrolled down.
Can someone figure out what the issue is ?
You should use offsetX and offsetY property of MouseEvent, instead of e.clientX - canvas.offsetLeft and e.clientY - canvas.offsetTop respectively, to draw the line exactly at the mouse point even after the web page is scrolled.
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 color(obj) {
switch (obj.id) {
case "green":
x = "green";
break;
case "blue":
x = "blue";
break;
case "red":
x = "red";
break;
case "yellow":
x = "yellow";
break;
case "orange":
x = "orange";
break;
case "black":
x = "black";
break;
case "white":
x = "white";
break;
}
if (x == "white") y = 14;
else y = 2;
}
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("Want to clear");
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.offsetX;
currY = e.offsetY;
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.offsetX;
currY = e.offsetY;
draw();
}
}
}
<div class="content-wrapper" onmousemove="init()" style="width: 50%;
float: left;">
<canvas id="can" width="400" height="500" style="border:2px solid;"></canvas>
</div>
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>
I wouldn't recommend putting in html as such using JS, but well here is the fix:
Use template literals for the html string.
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>`;
<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>
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");