Created
April 7, 2019 03:15
-
-
Save sagarjhaa/cb8b3165f8d24c066805f3354397f30d to your computer and use it in GitHub Desktop.
How to draw using canvas
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
}); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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