canvas example

messing with canvas

by roomyrooms

HTML

<canvas id="canvas" width="1000" height="1000">
            This text is displayed if your browser does not support HTML5 Canvas.
        </canvas>

CSS

canvas {
    border: 1px dotted black;
}

JavaScript

var my_canvas = document.getElementById('canvas'),
    context = my_canvas.getContext("2d");



var all3 = [
    {
        "x": 5114,
        "y": 944
    },
    {
        "x": 5114,
        "y": 924
    },
    {
        "x": 5136,
        "y": 924
    },
    {
        "x": 5136,
        "y": 934
    },
    {
        "x": 5159,
        "y": 934
    },
    {
        "x": 5159,
        "y": 944
    },
    {
        "x": 5159,
        "y": 944
    },
    {
        "x": 5159,
        "y": 944
    },
    {
        "x": 5159,
        "y": 956
    },
    {
        "x": 5159,
        "y": 944
    },
    {
        "x": 5171,
        "y": 944
    },
    {
        "x": 5171,
        "y": 947
    },
    {
        "x": 5184,
        "y": 947
    },
    {
        "x": 5184,
        "y": 950
    },
    {
        "x": 5196,
        "y": 950
    },
    {
        "x": 5196,
        "y": 953
    },
    {
        "x": 5208,
        "y": 953
    },
    {
        "x": 5208,
        "y": 956
    },
    {
        "x": 5208,
        "y": 962
    },
    {
        "x": 5208,
        "y": 956
    },
    {
        "x": 5224,
        "y": 956
    },
    {
        "x": 5224,
        "y": 958
    },
    {
        "x": 5241,
        "y": 958
    },
    {
        "x": 5241,
        "y": 960
    },
    {
        "x": 5257,
        "y": 960
    },
    {
        "x": 5257,
        "y": 962
    },
    {
        "x": 5257,
        "y": 963
    },
    {
        "x": 5257,
        "y": 962
    },
    {
        "x": 5269,
        "y": 962
    },
    {
        "x": 5269,
        "y": 962
    },
    {
        "x": 5282,
        "y": 962
    },
    {
        "x": 5282,
        "y": 962
    },
    {
        "x": 5294,
        "y": 962
    },
    {
        "x": 5294,
        "y": 963
    },
    {
        "x": 5294,
        "y": 960
    },
    {
        "x": 5294,
        "y": 963
    },
    {
        "x": 5310,
        "y": 963
    },
    {
        "x": 5310,
        "y": 962
    },
    {
        "x": 5326,
 ...