Dear StackOverflow community,
I'm currently working on a project. My goal is to color individual pixels in a zoomed in canvas.
However when I used:
canvas.body.style.width = '600px';
canvas.body.style.height= '300px';
my functions stopped working.
Here is my JavaScript code:
<!DOCTYPE html>
<html>
<meta charset='UTF-8'>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:3px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var mouseDown = 0;
function mouseDownFunction() {
++mouseDown;
}
function mouseUpFunction() {
--mouseDown;
}
function mouseMoveFunction(e) {
var posX = e.clientX;
var posY = e.clientY;
ctx.fillRect(posX - 10, posY - 10, 100, 100);
}
c.addEventListener("mousedown", function(e){
mouseDownFunction();
this.addEventListener("mousemove", mouseMoveFunction);
});
c.addEventListener("mouseup", function(e){
mouseUpFunction();
this.removeEventListener("mousemove", mouseMoveFunction);
});
c.addEventListener("click", mouseMoveFunction);
c.addEventListener("mouseout",function(e){
this.removeEventListener("mousemove", mouseMoveFunction);
});
c.addEventListener("mouseenter",function(e){
if (mouseDown == 1) {
this.addEventListener("mousemove", mouseMoveFunction);
}});
</script>
</body>
</html>
What's the best practice to zoom in and out of my canvas to allow easy access to individual pixels?
Thanks in advance for your time.
Sincerely, JavaIsMyBae
