HTML Pixel Draw Thingy

Question

I'm ~~making~~ ~~trying to make~~ failing at making a JavaScript/HTML application where you basically just draw a picture. Right now, the pixels are blurring and aren't crisp like I would like them to be. Perhaps more problematic, the "pixels" are offset at a certain exponential value, but I haven't the foggiest clue why.

Here's the code so far:

<!DOCTYPE html>
<html>

<script>
function changePixel(event) {
    var x = Math.floor(event.screenX);
    var y = Math.floor(event.screenY);
    var canvas = document.getElementById("canvas");
    var container = canvas.getContext("2d");
    //if (container.style.backgroundColor == "rgb(0, 0, 0)") {
        //container.fillStyle = "rgb(255, 255, 255)";
        //container.fillRect( event.clientX, event.clientY, 1, 1 );
    //} else {
        container.fillStyle = "rgb(255, 0, 0)";
        container.fillRect( x, y, 1, 1 );
    //}
}
</script>

<body>

<canvas id="canvas" onclick = "changePixel(event)" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; color: rgb(0, 255, 0);"></canvas>

</body>
</html>

Another note, I do plan on making this a PHP enabled application (yes, I do have a server for that) so you could edit the canvas online with a bunch of other people, so if you foresee any of this code conflicting with that idea, then please speak up.

Thanks, guys!

You need to set the canvas size properly, right now only a CSS size is set which stretches the canvas to fit it making it blurry. — , May 04 '15 at 01:11

HTML Pixel Draw Thingy

0 Answers0