Pixel Magicart 1

Programming pixel dust

The magic happens with another wonderful HTML5 feature called the canvas element or tag. You have to use an ID tag to get to the methods via JavaScript so this is a sophisticated process that really shines. Canvas is a regular JavaScript object called HTMLCanvasElement which contains the context object that controls all the pixels of interest. If you just add the canvas tag to your HTML page a default 300x150px box appears without border or fill so it plops a big space filler in your page. Basically, the pixels are transparent. Here's the way to get started:
 const context = document.getElementById('canvas1').getContext('2d');
It's also common to split the line with a reference to the canvas tag and a second line using the ctx variable:
 const canvas = document.getElementById('canvas1');
 const ctx = canvas.getContext('2d');

Now all the rendering methods can be applied. The beauty of this second approach is the sizing can be done using the canvas variable, i.e., canvas.width; Otherwise, the sizing is done from a style tag with the canvas tag on the HTML page. From this context, 3d is implied and in fact, that is the case by using another rendering engine called WebGL. That's another level.

If you're drawing electronic art with canvas, you can even convert the final product to a .png or .jpeg with the toDataURL() method. Just add the 'png' or 'jpeg' as an argument. The method defaults to png, base64.

References:

  1. https://www.bucephalus.org/text/CanvasHandbook/CanvasHandbook.html
  2. https://www.w3schools.com/graphics/canvas_reference.asp

The best way to experience this art form is to look at YouTube videos by several authors that take you through the steps. My number one suggestion is Franks Laboratory.

Since animation is fundamental to canvas pixel manipulation, video games can be realized by using the approach. By pixel, I mean you have an array containing all the pixels inside the defined canvas and the rgb color and alpha values. You can modify all of it or move it to draw or distort in the case of an image on the canvas. You can use mathematics to connect things, make things bounce, detect collisions, or anything you've seen in video games. Check it out.