Skip to content

Instantly share code, notes, and snippets.

@johannesl

johannesl/canvastest.html

Created August 25, 2022 12:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save johannesl/c065ebf69ba6574ac77647f8fd31c839 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save johannesl/c065ebf69ba6574ac77647f8fd31c839 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. johannesl created this gist Aug 25, 2022.
    35 changes: 35 additions & 0 deletions canvastest.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    <canvas width="640" height="480" id="testcanvas">
    </canvas>
    <script>
    function clear() {
    var ctx = document.getElementById('testcanvas').getContext('2d');
    ctx.fillStyle = "rgb(0,0,0)"
    ctx.fillRect( 0, 0, 640, 480 );
    }
    function paint( i ) {
    var ctx = document.getElementById('testcanvas').getContext('2d');
    for( var y = 0; y < 480; y++ ) {
    for( var x = 0; x < 640; x++ ) {
    if( x % 2 == 0 && y % 2 == 0) {
    ctx.fillStyle = "rgb(255,255,255)"
    //if( y > 100 && y < 400 )
    // if( x > 100 && x < 500 )
    if( ((x * y) & 256) > 100)
    ctx.fillStyle = "rgb(255,128,128)"
    ctx.fillRect( x, y, 1, 1 )
    }
    }
    }
    }
    function setpixel( x, y, r, g, b ) {
    var ctx = document.getElementById('testcanvas').getContext('2d');
    ctx.fillStyle = "rgb("+r+","+g+","+b+")"
    ctx.fillRect( x, y, 1, 1 )
    }

    clear()
    paint()
    for( x = 0; x < 200; x++) {
    setpixel( 100+x, 100+(x/2), 255, 255, 255 );
    }
    </script>