Created
August 25, 2022 12:13
-
-
Save johannesl/c065ebf69ba6574ac77647f8fd31c839 to your computer and use it in GitHub Desktop.
An example of how to use the CANVAS tag in HTML
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment