2

I am trying to get a shape to follow the mouse cursor on a large canvas. This code isn't working as expected. How can I modify this to the relative canvas size if the canvas is 100% width / height of the screen?

Also, I am aware of requestanimationframe, but for the purpose of demonstrating this issue, please ignore it (I'm using it but its a complicated mess of timings that aren't related to this example).

Fiddle: https://jsfiddle.net/gs5a4z84/

CSS:

* { margin: 0; padding: 0;}

body, html { height:100%; }

canvas {
    image-rendering: -moz-crisp-edges;    /* Firefox */
    image-rendering: pixelated;           /* Chrome */
    position:absolute;
    width:100%;
    height:100%;
}

HTML/JS:

<!DOCTYPE html>
<html>
    <head>
        <link href="main.css" rel="stylesheet"</link>
    </head>
    <body>
        <div id="wrapper">
            <canvas id="ctx" width="256" height="144"></canvas>
        </div>
        <script>    
            var mouseX, mouseY;
            const WIDTH = 256;
            const HEIGHT = 144;
            var ctx = document.getElementById('ctx').getContext('2d');
            ctx.canvas.addEventListener('mousemove', setMousePosition, false);
            function setMousePosition(e) {
                mouseX = e.clientX;
                mouseY = e.clientY;
            }
            function drawCursor() {
                ctx.clearRect(0,0,WIDTH,HEIGHT);
                ctx.fillStyle = "#FF6A6A";
                ctx.fillRect(mouseX, mouseY, 16, 16);
            }
            setInterval(function (){
                drawCursor();
            }, 40);
        </script>
    </body>
</html>

Thank you for any and all help.

Improve this question
2
  • Wanted to also comment, in the css if I remove width:100% and height: 100%, it will work as how I want it, but the thing is as far as rendering goes, I need a canvas that will be stretched, is there a way around this?
    – simon
    Commented Sep 29, 2016 at 14:54
  • BTW, the link element can't have a closing element, instead of <link stuff></link> use <link stuff> or <link stuff/>
    – Bálint
    Commented Sep 29, 2016 at 15:51

1 Answer 1

Reset to default
3

If you use CSS width and height property for the canvas object, then you won't actually change how many pixels there are on the canvas, but how big it is. To fix your problem, set the canvas' width and height property using JavaScript:

JavaScript:

ctx.canvas.width = innerWidth;
ctx.canvas.height = innerHeight;

CSS:

body, canvas {
    margin: 0;
    padding: 0;
}
Improve this answer
4
  • This works, but it also scaled everything down. The project was originally designed with the width and height set to 100%. Is there no other way?
    – simon
    Commented Sep 29, 2016 at 16:00
  • @simon you can still set the width and height to 100% but it won't be perfect, but on bigger screens you won't be able to notice it
    – Bálint
    Commented Sep 29, 2016 at 16:05
  • I will give you the correct answer for this question after I do some testing. Thank you @Bálint
    – simon
    Commented Sep 29, 2016 at 16:08
  • 1
    Yes, after scaling all of my images to match this, everything is working, and I actually got a significant performance boost. Thank you!
    – simon
    Commented Sep 29, 2016 at 17:11

Not the answer you're looking for? Browse other questions tagged or ask your own question.