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

Tree @master (Download .tar.gz)

magnified-canvas.html @master — raw · history · blame 

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
<!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>