git @ Cat's Eye Technologies The-Dipple / master javascript / magnified-canvas.html
master

Tree @master (Download .tar.gz)

magnified-canvas.html @masterraw · history · blame

<!DOCTYPE html>
<!--
SPDX-FileCopyrightText: Chris Pressey, the original author of this work, has dedicated it to the public domain.
For more information, please refer to <https://unlicense.org/>
SPDX-License-Identifier: Unlicense
-->
<head>
  <meta charset="utf-8">
  <title>Magnified Canvas</title>
  <style>
canvas { border: 1px solid black; }
  </style>
</head>
<body>
<h1>Magnified Canvas</h1>

<p>For to see exactly when you should be placing things at 0.5 canvas units.</p>

<canvas id="canvas1">
Your browser doesn't support displaying an HTML5 canvas.
</canvas>

<canvas id="canvas2">
Your browser doesn't support displaying an HTML5 canvas.
</canvas>

</body>
<script>
var draw = function() {
    var x = 0;
    var y = 0;
    var w = 30;
    var h = 30;
    var zoom1 = 1;
    var zoom2 = 10;

    var canvas1 = document.getElementById('canvas1');
    canvas1.width = w;
    canvas1.style.width = (canvas1.width * zoom1) + 'px';
    canvas1.height = h;
    canvas1.style.height = (canvas1.height * zoom1) + 'px';
    var ctx1 = canvas1.getContext('2d');

    var canvas2 = document.getElementById('canvas2');
    canvas2.width = w;
    canvas2.style.width = (canvas2.width * zoom2) + 'px';
    canvas2.height = h;
    canvas2.style.height = (canvas2.height * zoom2) + 'px';
    var ctx2 = canvas2.getContext('2d');

    var drawCtx = function(ctx) {

        ctx.fillStyle = 'black';
        ctx.fillRect(x, y, w, h);

        ctx.beginPath();
        ctx.strokeStyle = 'red';
        ctx.fillStyle = 'red';
        ctx.moveTo(x, y);
        ctx.lineTo(x + w/2, y + h/2);
        ctx.lineTo(x + w, y);
        ctx.closePath();
        //ctx.stroke();
        ctx.fill();
        
        ctx.beginPath();
        ctx.strokeStyle = 'green';
        ctx.fillStyle = 'green';
        ctx.moveTo(x + w, y);
        ctx.lineTo(x + w/2, y + h/2);
        ctx.lineTo(x + w, y + h);
        ctx.closePath();
        //ctx.stroke();
        ctx.fill();
        
        ctx.beginPath();
        ctx.strokeStyle = 'blue';
        ctx.fillStyle = 'blue';
        ctx.moveTo(x + w, y + h);
        ctx.lineTo(x + w/2, y + h/2);
        ctx.lineTo(x, y + h);
        ctx.closePath();
        //ctx.stroke();
        ctx.fill();
        
        ctx.beginPath();
        ctx.strokeStyle = 'yellow';
        ctx.fillStyle = 'yellow';
        ctx.moveTo(x, y + h);
        ctx.lineTo(x + w/2, y + h/2);
        ctx.lineTo(x, y);
        ctx.closePath();
        //ctx.stroke();
        ctx.fill();
    };

    drawCtx(ctx1);
    drawCtx(ctx2);

};

window.onload = draw();
window.onresize = draw();
</script>