Skip to content

Instantly share code, notes, and snippets.

@sagarjhaa
Created April 7, 2019 03:15
Show Gist options
  • Save sagarjhaa/cb8b3165f8d24c066805f3354397f30d to your computer and use it in GitHub Desktop.
Save sagarjhaa/cb8b3165f8d24c066805f3354397f30d to your computer and use it in GitHub Desktop.
How to draw using canvas
var mousePressed = false;
var lastX, lastY;
var ctx;
var li = [];
function Draw(x, y, isDown) {
if (isDown) {
ctx.beginPath();
ctx.strokeStyle = $('#selColor').val();
ctx.lineWidth = $('#selWidth').val();
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
var t = [x,y];
// li.push(t);
// console.log(t);
lastX = x; lastY = y;
}
ctx = document.getElementById('myCanvas').getContext("2d");
console.log(ctx);
$('#myCanvas').mousedown(function (e) {
mousePressed = true;
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
});
$('#myCanvas').mousemove(function (e) {
if (mousePressed) {
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
}
});
$('#myCanvas').mouseup(function (e) {
mousePressed = false;
});
$('#myCanvas').mouseleave(function (e) {
mousePressed = false;
});
<canvas id="myCanvas" width="28" height="28" style="border:2px solid black">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment