Series
In this series we will get started with the canvas element and use JavaScript to make some amazing art.
My confession: I've never used canvas before this article. I just have a cool idea in my head, which needs Canvas, so why not document my explorations using the HTML canvas element. <canvas> is an HTML element which can be used to draw graphics via J...
Yesterday we got started on our basic canvas course. Thinking about the project I want to do, I need to export the canvas as an image. So how do we convert the canvas to an image? There are actually two ways of doing this, and we will explore both. S...
So far, we have learned the basics of the canvas, and how to export it as an image. But it was all plain looking, so let's go ahead and explore our colouring options for the canvas. Today we'll learn how to make the following; https://codepen.io/rebe...
Another day of canvas exploration, and today we'll be looking at using images in our canvas. We use the getImageData function to read an image, which will return an imageData object that copies pixel data. For each pixel, we will get the rgba values....
Yesterday, we saw how to use images on our canvas and even invert the colours. But what if we want to convert them to only three colour options? The colour options we will be using are; black white grey (only 1 type!) This will abstract our image a...
Lately, we have been on a journey with Canvas and have learned the following elements to it: Getting started with the HTML canvas Vanilla JavaScript save canvas as an image Vanilla JavaScript colouring our canvas elements 🌈 Vanilla JavaScript image...
