I'm currently trying to achieve the following.
I have a HTML5 Canvas, where you can draw in. The code is this:
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();
}
}
}
<html>
<body onload="init()">
<canvas id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>
<div style="position:absolute;top:12%;left:43%;">Choose Color</div>
<div style="position:absolute;top:15%;left:45%;width:10px;height:10px;background:green;" id="green" onclick="color(this)"></div>
<div style="position:absolute;top:15%;left:46%;width:10px;height:10px;background:blue;" id="blue" onclick="color(this)"></div>
<div style="position:absolute;top:15%;left:47%;width:10px;height:10px;background:red;" id="red" onclick="color(this)"></div>
<div style="position:absolute;top:17%;left:45%;width:10px;height:10px;background:yellow;" id="yellow" onclick="color(this)"></div>
<div style="position:absolute;top:17%;left:46%;width:10px;height:10px;background:orange;" id="orange" onclick="color(this)"></div>
<div style="position:absolute;top:17%;left:47%;width:10px;height:10px;background:black;" id="black" onclick="color(this)"></div>
<div style="position:absolute;top:20%;left:43%;">Eraser</div>
<div style="position:absolute;top:22%;left:45%;width:15px;height:15px;background:white;border:2px solid;" id="white" onclick="color(this)"></div>
<img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;">
<input type="button" value="save" id="btn" size="30" onclick="save()" style="position:absolute;top:55%;left:10%;">
<input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:55%;left:15%;">
</body>
</html>
So basically just drawing lines from one point to another.
Now I'm wondering about the following. Most of you should know OneNote, which has a feature that you can draw something, and then you see "whoops, this was drawn much to big or to small in comparison to the other things I have drawn" and then you can just mark it and grab the corner and make the rectangle you marked smaller or bigger.
I'm currently thinking about the same solution in a canvas. So people can draw something in that canvas, and there's a resize button, when you click on it, you can "draw" a rectangle (like with a dotted border and transparet fill) and everything in that rectangle is then marked. Then you can grab one of the corners and make the marked drawings smaller or bigger, and move that content as well.
But honestly, I have no idea how to get started with that.
Anybody has an idea on how to do that?
Not that difficult:
Create a button, attach an event listener, call a function. I’ll call it resize for the purpose of my guide
Create the dotted border overlay over your canvas. Just make it a div, wrap the canvas into a wrapper, apply a bit of CSS. Voilà.
Attach event handlers to the div to make it resizable or search the web for a library that can do that.
Then you’ll have to redraw the canvas as image with CanvasRenderingContext2D.drawImage().
It’s worth noting that canvases are raster-graphics. The canvas will become unsharp with enlarging.
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'm using a script I found online so I can have a Canvas where users can draw.
They get to pick a colour and then draw whatever they want.
This is working fine, but now I implementing this on a Phonegap Hybrid App and unfortunately, this is not supporting touch events.
I tried changing the EventListeners to 'touchmove', 'touchstart' and 'touchend' but I had no luck with this.
This is the code I have:
init();
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");
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
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();
}
}
}
<canvas id="can" width="400" height="400"></canvas>
<div class="controlos-canvas row">
<div class="cores col-50">
<h5 class="titulo-controlos">Escolhe a Cor</h5>
<div style="background:green;" class="picker-cor" id="green" onclick="color(this)"></div>
<div style="background:blue;" class="picker-cor" id="blue" onclick="color(this)"></div>
<div style="background:#ff0000;" class="picker-cor" id="red" onclick="color(this)"></div>
<div style="background:yellow;" class="picker-cor" id="yellow" onclick="color(this)"></div>
<div style="background:orange;" class="picker-cor" id="orange" onclick="color(this)"></div>
<div style="background:black;" class="picker-cor" id="black" onclick="color(this)"></div>
</div>
<div class="funcoes col-50">
<div class="eraser">
<h5 class="titulo-controlos">Apagar</h5>
<div class="borracha" id="white" onclick="color(this)"></div>
</div>
<img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;">
<input type="button" value="Guardar" id="btn" size="30" onclick="save()">
<input type="button" value="Limpar" id="clr" size="23" onclick="erase()">
</div>
</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");
I come here for a clean canvas issue in HTML/Javascript. In this canvas, it's use for a signature (like this).
If i use these lines of code :
var canvas, ctx, flag = false,
prevX = 0,
currX = 0,
prevY = 0,
currY = 0,
dot_flag = false;
var x = "black",
y = 2;
function save() {
var canvas = document.getElementById("can");
var dataURL = canvas.toDataURL("image/png");
document.getElementById('source').value = dataURL;
var fd = new FormData(document.forms["general"]);
var xhr = new XMLHttpRequest();
xhr.open('Get', 'convertToPdf.php', true);
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percentComplete = (e.loaded / e.total) * 100;
console.log(percentComplete + '% uploaded');
alert('Succesfully uploaded');
}
};
xhr.onload = function() {
};
xhr.send(fd);
}
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";
}
var conv = new ActiveXObject("pdfServMachine.converter");
conv.convert("http://www.google.com", "google.pdf", false);
WScript.Echo("finished conversion");
}
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();
}
}
}
<p align="center">
<canvas id="can" width="700" height="200" style="border:2px solid;"></canvas>
</p>
<table align="center">
<tr align="left">
<td align="right">
<input type="submit" name="ss" value="Submit" id="btn" onclick="save();return validateBeforeSubmit(); ">
</td>
<td align="right">
<input type="button" name="ss" value="clear" id="btn" onclick="erase()">
</td>
</tr>
</table>
The clear, works, but if I have a scrollbar in my page, we can't see anything in the canvas!!
So, I was looking for an function init() that will be able to write in the canvas wherever you are in the webpage and found this :
function init(){
var canvas = document.getElementById('can');
var ctx = canvas.getContext('2d');
w = canvas.width;
h = canvas.height;
var x = null;
var y;
canvas.onmousedown = function(e){
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
ctx.beginPath();
ctx.moveTo(x,y);
}
canvas.onmouseup = function(e){
x = null;
}
canvas.onmousemove = function(e){
if (x==null) return;
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
ctx.lineTo(x,y);
ctx.stroke();
}
}
But know, the canvas take all 'signature' for where you are in the page, so, if the webpage have a scroll bar, no problem, the canvas still show something if you draw something, but the clear won't work on it.
So, my issue it's that I want to be able to write in the canvas, no matter where it is, and be able, if a click on my button who have the function clear, to clear the canvas.
EDIT
Here what my webpage look like:
My page
Right now, I put it without scrollbar to show, but, at the original size, the page have a scroll. My canvas it's at the bottom of the page, so, when I scroll down, I can't draw in it, but in a page without scroll, I can draw in it and erase it!!
There was the reason that I put the second init function, that if there a scrollbar or not, I'm still able to draw in it, that I scroll or not the page, but not for clean it!!
Thanks for you're help
https://jsfiddle.net/we242fmt/3/
(In the example I purposely moved the canvas down the page using CSS to better demonstrate. You can remove the CSS I've added in to get back to where you were)
What's happening is that you're getting the offset of the canvas element but the offset doesn't take into account how far you've scrolled down the page.
All we need to do is simply adjust the code to incorporate the distance that the user has scrolled:
currX = e.clientX - canvas.offsetLeft + window.scrollX;
currY = e.clientY - canvas.offsetTop + window.scrollY;
In your example you don't need to use scrollX because you're not scrolling horizontally, but I included it for the sake of being thorough.