i want to let my users to draw their signatures to approve that they accept my user agreements. I created canvas and javascript code, but instead of drawing under the mouse, it draws next to it.
You can see how it works here:
https://streamable.com/lz9h1z
JS CODE:
// Select the canvas element
const canvas = document.getElementById('signature-pad');
const ctx = canvas.getContext('2d');
// Set up event listeners
let isDrawing = false;
let lastX = 0;
let lastY = 0;
canvas.addEventListener('mousedown', e => {
isDrawing = true;
lastX = e.offsetX;
lastY = e.offsetY;
});
canvas.addEventListener('mousemove', e => {
if (isDrawing) {
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
lastX = e.offsetX;
lastY = e.offsetY;
}
});
canvas.addEventListener('mouseup', () => {
isDrawing = false;
});
canvas.addEventListener('mouseout', () => {
isDrawing = false;
});
// Set up button event listeners
const clearButton = document.getElementById('clear-button');
clearButton.addEventListener('click', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
const saveButton = document.getElementById('save-button');
saveButton.addEventListener('click', () => {
const dataURL = canvas.toDataURL();
console.log(dataURL);
});
HTML CODE:
<canvas id="signature-pad" width="400" height="200"></canvas>
I was trying to do something with offsets but still no idea.
You can get the mouse position using this code
function getMouse(e) {
var rect = canvas.getBoundingClientRect();
mouseX = (e.clientX - rect.left) / (rect.right - rect.left) * canvas.width,
mouseY = (e.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height;
}
Check out the replit here: https://VeneratedJovialCryptos.hackinggo306.repl.co
I have create an html file with the JS that is related just to the canvas, and everything works as expected. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="signature-pad" width="400" height="200"></canvas>
<script>
// Select the canvas element
const canvas = document.getElementById('signature-pad');
const ctx = canvas.getContext('2d');
// Set up event listeners
let isDrawing = false;
let lastX = 0;
let lastY = 0;
canvas.addEventListener('mousedown', e => {
isDrawing = true;
lastX = e.offsetX;
lastY = e.offsetY;
});
canvas.addEventListener('mousemove', e => {
if (isDrawing) {
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
lastX = e.offsetX;
lastY = e.offsetY;
}
});
canvas.addEventListener('mouseup', () => {
isDrawing = false;
});
canvas.addEventListener('mouseout', () => {
isDrawing = false;
});
</script>
</body>
</html>
Here is the result of running this html file: https://streamable.com/69bwa9
So you can try to place this code in a separate file, and see if everything works- if yes, then you should look for a problem in other parts of the code, if still no, maybe if is something about differences between physical machines, I am trying this on Mac.
Related
I am working on a simple drawing tool using JavaScript. However I have a problem with my draw() function. The line is always drawn slightly below the center of the mouse. May I please know what is my mistake here? I want the line to always be drawn at the center of the mouse as it moves. In my setPosition() function, does e.pageX and e.pageY actually maps the center of the mouse as x and y coordinates?
<!doctype html>
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<div class="controls">
<button class="clear">Clear</button> <span>Color
<input type="color" value="#ffff00" id="penColor"></span>
<span>Width
<input type="range" min="1" max="20" value="10" id="penWidth"></span>
</div>
<canvas id="canvas"></canvas>
<script>
let penColor = document.getElementById("penColor");
let penWidth = document.getElementById("penWidth");
let canvas = document.getElementById("canvas");
canvas.width = 700;
canvas.height = 700;
let context = canvas.getContext("2d");
let clearButton = document.querySelector(".clear");
let position = {
x: null,
y: null
}
let initialization = (e) => {
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseenter", setPosition)
canvas.addEventListener("mousemove", setPosition)
}
window.onload = initialization;
let setPosition = (e) => {
position.x = e.pageX;
position.y = e.pageY;
}
clearButton.addEventListener("click", (e) => {
let confirmation = confirm("Are you sure you want to clear the canvas?");
let result = confirmation ? true : false;
if (result) {
context.clearRect(0, 0, canvas.width, canvas.height);
}
})
let draw = (e) => {
if (e.buttons !== 1) return;
context.beginPath();
context.moveTo(position.x, position.y);
setPosition(e);
context.lineTo(position.x, position.y);
context.lineWidth = penWidth.value;
context.strokeStyle = penColor.value;
context.lineCap = "round";
context.stroke();
}
</script>
</body>
</html>
MouseEvent.pageX
The pageX read-only property of the MouseEvent interface returns the X (horizontal) coordinate (in pixels) at which the mouse was clicked, relative to the left edge of the entire document.
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX
so that is not the X position on the canvas, you have to substract the canvas position.
e.pageX - canvas.offsetLeft;
e.pageY - canvas.offsetTop;
let canvas = document.getElementById("canvas");
canvas.width = canvas.height = 200;
let context = canvas.getContext("2d");
let position = { x: null, y: null }
let setPosition = (e) => {
position.x = e.pageX - canvas.offsetLeft;
position.y = e.pageY - canvas.offsetTop;
}
let draw = (e) => {
if (e.buttons !== 1) return;
context.beginPath();
context.moveTo(position.x, position.y);
setPosition(e);
context.lineTo(position.x, position.y);
context.stroke();
}
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseenter", setPosition)
canvas.addEventListener("mousemove", setPosition)
canvas {
border: 1px solid black;
}
<canvas id="canvas"></canvas>
I need to prevent the cursor from going out of the window.
I've read that it's not possible, however I've already done that with a WebGL export from a Unity project. You first had to click the canvas, then the browser would show you a notification saying that you should press 'escape' to exit and get your cursor back.
Since a Unity WebGL canvas can do it, I assume it can be done without Unity?
Use the HTML5 Pointer Lock API
https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Not my code example below, all creds to
https://github.com/mdn/dom-examples/tree/master/pointer-lock
HTML
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Pointer lock demo</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class="information">
<h1>Pointer lock demo</h1>
<p>This demo demonstrates usage of the pointer lock API. Click on the canvas area and your mouse will directly control the ball inside the canvas, not your mouse pointer. You can press escape to return to the standard expected state.</p>
</div>
<canvas width="640" height="360">
Your browser does not support HTML5 canvas
</canvas>
<div id="tracker"></div>
<script src="app.js"></script>
</body>
</html>
JS
// helper function
const RADIUS = 20;
function degToRad(degrees) {
var result = Math.PI / 180 * degrees;
return result;
}
// setup of the canvas
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var x = 50;
var y = 50;
function canvasDraw() {
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#f00";
ctx.beginPath();
ctx.arc(x, y, RADIUS, 0, degToRad(360), true);
ctx.fill();
}
canvasDraw();
// pointer lock object forking for cross browser
canvas.requestPointerLock = canvas.requestPointerLock ||
canvas.mozRequestPointerLock;
document.exitPointerLock = document.exitPointerLock ||
document.mozExitPointerLock;
canvas.onclick = function() {
canvas.requestPointerLock();
};
// pointer lock event listeners
// Hook pointer lock state change events for different browsers
document.addEventListener('pointerlockchange', lockChangeAlert, false);
document.addEventListener('mozpointerlockchange', lockChangeAlert, false);
function lockChangeAlert() {
if (document.pointerLockElement === canvas ||
document.mozPointerLockElement === canvas) {
console.log('The pointer lock status is now locked');
document.addEventListener("mousemove", updatePosition, false);
} else {
console.log('The pointer lock status is now unlocked');
document.removeEventListener("mousemove", updatePosition, false);
}
}
var tracker = document.getElementById('tracker');
var animation;
function updatePosition(e) {
x += e.movementX;
y += e.movementY;
if (x > canvas.width + RADIUS) {
x = -RADIUS;
}
if (y > canvas.height + RADIUS) {
y = -RADIUS;
}
if (x < -RADIUS) {
x = canvas.width + RADIUS;
}
if (y < -RADIUS) {
y = canvas.height + RADIUS;
}
tracker.textContent = "X position: " + x + ", Y position: " + y;
if (!animation) {
animation = requestAnimationFrame(function() {
animation = null;
canvasDraw();
});
}
}
I'm creating a simple whiteboard using html5 canvas.
I need to give the canvas a width and height. This causes the whiteboard to not work properly.
If I remove the width and height from the canvas, it works fine!
This is my code:
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
// Fill Window Width and Height
myCanvas.width = window.innerWidth;
myCanvas.height = window.innerHeight;
// Set Background Color
ctx.fillStyle="#fff";
ctx.fillRect(0,0,myCanvas.width,myCanvas.height);
// Mouse Event Handlers
if(myCanvas){
var isDown = false;
var canvasX, canvasY;
ctx.lineWidth = 5;
$(myCanvas)
.mousedown(function(e){
isDown = true;
ctx.beginPath();
canvasX = e.pageX - myCanvas.offsetLeft;
canvasY = e.pageY - myCanvas.offsetTop;
ctx.moveTo(canvasX, canvasY);
})
.mousemove(function(e){
if(isDown !== false) {
canvasX = e.pageX - myCanvas.offsetLeft;
canvasY = e.pageY - myCanvas.offsetTop;
ctx.lineTo(canvasX, canvasY);
ctx.strokeStyle = "#000";
ctx.stroke();
}
})
.mouseup(function(e){
isDown = false;
ctx.closePath();
});
}
// Touch Events Handlers
draw = {
started: false,
start: function(evt) {
ctx.beginPath();
ctx.moveTo(
evt.touches[0].pageX,
evt.touches[0].pageY
);
this.started = true;
},
move: function(evt) {
if (this.started) {
ctx.lineTo(
evt.touches[0].pageX,
evt.touches[0].pageY
);
ctx.strokeStyle = "#000";
ctx.lineWidth = 5;
ctx.stroke();
}
},
end: function(evt) {
this.started = false;
}
};
// Touch Events
myCanvas.addEventListener('touchstart', draw.start, false);
myCanvas.addEventListener('touchend', draw.end, false);
myCanvas.addEventListener('touchmove', draw.move, false);
// Disable Page Move
document.body.addEventListener('touchmove',function(evt){
evt.preventDefault();
},false);
#myCanvas{
width:90%;
height:200px;
border:solid 1px #c8def0;
border-radius:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas">
Sorry, your browser does not support HTML5 canvas technology.
</canvas>
basically, when I run the above code, the mouse doesn't go all the way down the canvas but if I remove the canvas width and height, it works fine.
Could someone please advice on this issue?
Thanks in advance.
I've been studying and trying to write an application that takes whatever image is on an HTML5 canvas element and send it to clients. When trying to take the image using canvas.toDataURL(), compressing and sending it back to server, the client was sometimes displaying the image and sometimes not displaying what was sent. First I thought that it could be that the data was corrupted, but working on a local server and having 29/30 corrupted data didn't make sense to me, so I've tried to see what was going on and registered the length of the base64 image and noticed that it's length was changing, although the content of the canvas wasn't changing. Why is that happening? I wrote a simple page in which you can edit the canvas content by drawing on it that shows that happening:
<!DOCTYPE html>
<html>
<head>
<title>Draw</title>
<style>
body{margin:0;}
</style>
<script>
addEventListener("load", Load, false);
var board = undefined;
var ctx = undefined;
var loaded = false;
var mousehold = false;
var mousex = 0;
var mousey = 0;
var lastx = 0;
var lasty = 0;
var firstclick = false;
function Load(e)
{
loaded = true;
board = document.getElementById("board");
ctx = board.getContext("2d");
board.width = window.innerWidth;
board.height = window.innerHeight;
addEventListener("mousedown", function(e)
{
mousehold = true;
}, false);
addEventListener("mouseup", function(e)
{
mousehold = false;
firstclick = false;
}, false);
addEventListener("mousemove", function(e)
{
mousex = e.clientX;
mousey = e.clientY;
// if(mousehold == true) console.log(mousex + " " + mousey);
}, false);
ctx.beginPath();
ctx.lineWidth = 5;
UpdateBoard();
}
function UpdateBoard()
{
if(mousehold == true)
{
if(firstclick == false)
{
lastx = mousex;
lasty = mousey;
firstclick = true;
}
ctx.moveTo(lastx, lasty);
ctx.lineTo(mousex, mousey);
ctx.stroke();
lastx = mousex, lasty = mousey;
}
window.requestAnimationFrame(UpdateBoard);
}
function send()
{
var img = board.toDataURL();
console.log(img.length);
}
</script>
</head>
<body>
<canvas id="board"></canvas>
<button style="right:10px;bottom:10px;position:fixed;z-index:999999;" onclick="send();">Send</button>
</body>
</html>
Clicking "send" button will log the base64 image length on console. If you draw something to the screen, the content of the canvas will obviously change, but if you stop drawing and click "send" button a few times (without touching canvas content) you'll see that it seems to be generating different base64 images. Why is that happening? Is it possible to prevent that from happening? My application needs to update content constantly (compressed, but I've tried it without compression and problem was the same).To demonstrate the problem I've uploaded an image to imgur: http://imgur.com/a/iQ70T (ignore the typo in the image).Thank you for your attention.
The reason why this happens is that you have attached all the event listeners to the window object and not the canvas (mousedown, the others can be on window) the mousedown will be registered also when you hit the send button.
This means the last path is redrawn for each frame since mousehold will be true, accumulating anti-aliasing pixels affecting the alpha channel, hence will change the bitmap.
Example fix (just attach the mousedown handler to canvas):
addEventListener("load", Load, false);
var board = undefined;
var ctx = undefined;
var loaded = false;
var mousehold = false;
var mousex = 0;
var mousey = 0;
var lastx = 0;
var lasty = 0;
var firstclick = false;
function Load(e) {
loaded = true;
board = document.getElementById("board");
ctx = board.getContext("2d");
board.width = window.innerWidth;
board.height = window.innerHeight;
// this must be at canvas element
board.addEventListener("mousedown", function(e) {
mousehold = true;
}, false);
addEventListener("mouseup", function(e) {
mousehold = false;
firstclick = false;
}, false);
addEventListener("mousemove", function(e) {
mousex = e.clientX;
mousey = e.clientY;
// if(mousehold == true) console.log(mousex + " " + mousey);
}, false);
ctx.beginPath();
ctx.lineWidth = 5;
UpdateBoard();
}
function UpdateBoard() {
if (mousehold == true) {
if (firstclick == false) {
lastx = mousex;
lasty = mousey;
firstclick = true;
}
ctx.moveTo(lastx, lasty);
ctx.lineTo(mousex, mousey);
ctx.stroke();
lastx = mousex, lasty = mousey;
}
window.requestAnimationFrame(UpdateBoard);
}
function send() {
var img = board.toDataURL();
console.log(img.length);
}
body {margin:0}
<canvas id="board"></canvas>
<button style="right:10px;bottom:10px;position:fixed;z-index:999999;" onclick="send();">Send</button>
I'm trying to get two canvas drawing boards in one page (separatedly with all the functions draw and erase) and I couldn't find the trick.
Here is the code that allows me to show only one canvas drawing board :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>TEST PAINTING</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var canvasDiv = document.getElementById('canvasDiv');
var canvas = document.createElement('canvas');
canvas.setAttribute('width', "500");
canvas.setAttribute('height', "200");
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");
//
$('#canvas').mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
$('#canvas').mousemove(function(e){
if(paint){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
$('#canvas').mouseup(function(e){
paint = false;
});
$('#canvas').mouseleave(function(e){
paint = false;
});
$('#clearCanvasSimple').click(function(e){
clearCanvas();
});
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw()
{
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
context.strokeStyle = "#333";
context.lineJoin = "round";
context.lineWidth = 8;
for(var i=0; i < clickX.length; i++) {
context.beginPath();
if(clickDrag[i] && i){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
function clearCanvas()
{
clickX = new Array();
clickY = new Array();
clickDrag = new Array();
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
}
});
</script>
</head>
<body>
<div><button id="clearCanvasSimple" href="javascript:void(0)" onClick="clearCanvas()" type="button">Erase</button></div>
<div class="cadre" id="canvasDiv"></div>
</body>
</html>
Dos anyone know how I could work it out ? Thank you very much !