huamichaelchen/canvas-images-and-pixels

A few examples how to use canvas with pixel images based on the work necessary for logo-o-matic

Canvas, images and pixels

A tutorial explaining some of the features of Logo-O-Matic, with detailed information on how to manipulate pixel images in canvas.

Features:

• Back to pixels
• Canvas basics
  • Modifying images
    • Demo: Copy an image
    • Demo: Rotate an image
    • Demo: Resize an image
    • Demo: Scale an image
    • Demo: Crop an image
  • Reading and manipulating pixel data
    • Colour analysis
    • Demo: Analyse image colours
    • Displaying the colour under the cursor
    • Demo: Read colour under mouse cursor
    • Change pixel values of the canvas
    • Demo: Shift colours from green to red
• From font image to logo
  • Defining the letter dataset
  • Assembling the logo
  • Demo: Generate logo
• Saving the image
  • Demo: Images to data URL
  • The excellent download attribute
    • Demo: Make image downloadable
    • Demo: Wrap canvas in link
    • Workaround for lacking download support
      • Demo: Hacking around lack of download support
• Extra functionality
  • Zooming
    • Demo: Zooming - washed out
    • Demo: Zooming - pixelated
  • Changing logo colours
    • Demo: Changing logo colours
  • Generating the font dataset
    • Demo: Generate dataset
• SYS 64738