canvas example

messing with canvas

by STHayden

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cjs/simplex-noise.min.js"></script>
<canvas id="canvas" width="200" height="200">
            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')
var ctx = my_canvas.getContext("2d");
    
let width = 100;
let height = 100;

const myImageData = ctx.createImageData(width, height);

const data = myImageData.data;

for(let i = 0; i < myImageData.data.length; i += 4) {
	data[i] = 0;
	data[i + 1] = 0;
	data[i + 2] = 0;
	data[i + 3] = 255;
}

ctx.putImageData(myImageData, 0, 0);


const noise2D = createNoise2D()