Images, Pixels, Canvas, Tigers and Bears...

On 24th of June 2020 I gave a presentation at the "Programmed in Pencil" where I talked about the greatness that is Canvas for manipulating images.

This is the code repository of the demos I showed in the slides for you to play with and to learn from. The code is heavily commented and you can check it on the GitHub repository or in your developer tools of choice. On the menu, we have:

• Getting an image into the document - How to enable your users to add images by uploading, copy and paste or drag and drop.
• Adding an image to a canvas - How to get an image onto a canvas element.
• Analyse colours of an image - Finding out all the colours in an image and counting how many pixels of each colour are there.
• Pick a colour from an image - How to write a colour picker that shows the colour under the cursor.
• Rotating an image - How to use context translation of canvas to rotate an image.
• Zooming an image - How to zoom an image the simple way (scaling the context instead of re-pixeling).
• Interactively zooming an image - How to write a "zoom lens" to look at the pixels of an image.
• Adding a link to save the image - How to enable your visitors to save the generated image under a certain name.

Resources I covered in the talk are:

• How to get an image into the browser - blog post on that topic
• The canvas element docs at MDN - what to do in HTML.
• The Canvas API docs at MDN - how to use it in JS.
• Makethumbnails.com - a way to create thumbnails from a bunch of images and download them as a zip - all in the browser and on your device - no server side computation involved. This is also on GitHub as Simple thumbnails.
• Removephotodata.com - a simple way to remove date, time, location and other information in images from them. All in the browser, and again only computed on your device.
• Seeding a colour picker's options by adding an image - a blog post how to limit the options of an input of type color by adding an image and extracting its colours.
• Logo-o-Matic - a pet project of mine of 22 years that allows you to create logos using fonts from 8 bit computer demos and crack intros. Also open source but one hell of a mess.

The recording is available on YouTube:

You can check the slides of the talk at Noti.st or here:

View Images, pixels, canvas, tigers and bears… on Notist.