Feature: canvas add-on

[sc0ttj]

An add-on which extends the canvas 2d context, to provide the following features:

• creates objects with click, release, drag and mouseover, mouseout events
• create a wider array of objects (ellipses, stars, rounded squares, polygons, etc)
• better image handling (add a toImage() method, enable adding filters)
• add a toVideo() method, which saves the canvas animation as a video
• a tile method, for more eaily creating tiled backgrounds/environments
• a sprite method, for more easily creating animatable sprites (using spritesheets)
• use a simple API, consistent with native canvas 2d context API

See these libraries for ideas:

• EvanHahn/context-dot-clear - adds a ctx.clear() method
• rmkane/canvas-image-gradient - adds gradient images (fade out at bottom/top/etc)
• teunreyniers/CanvasRenderingContext2D.prototype - circular text
• concreteJS - toImage() and download() methods, lots more
• konvajs/konva - draw objects with built-in mouseover, mouseout events/methods, etc
• sapiraz/ExtendedCanvas - draw triangle, star, polygons, more
• llb421270473/extend-canvas - wrapped text objects
• reu/canvas-extensions - circles and ellipses
• fentas/canvasfilter - add image filters to canvas
• Martin-Pitt/canvas-plus - dashed line and rounded rectangles
• Quinten/verf - game library, unified gamepad + kb, collisions, more
• mordof/CanvWrap - mimics DOM so events on objects in the canvas is easier
• terkelg/deakins - provides a 2d camera (can zoom & pan, etc)
• farsult/context-2d/ - makes canvas API chainable, and nice way to set styles
• millermedeiros/CanvasContext2DWrapper - another chainable canvas 2dContext wrapper, nice and small
• nolanlawson/blob-util - Blob conversion utilities

[sc0ttj]

https://github.com/sc0ttj/component/pull/52

This PR includes a lot of the above, except sprites, tiling/maps, and stuff that requires interactivity.

Interactivity (like click, hover, drag & drop, gamepads, keyboard) can't easily be done with the canvas API alone - it doesn't keep a reference to anything it draws.

To solve this, each thing you draw (rectangle, star, image) needs an JS Object created as a reference to it:

• You update the properties of these Objects in your main loop.
• In the render loop, you check these properties, and decide what/where to render.

These reference objects usually have an update() method, for updating its properties, and a render() method for rendering to canvas once the props have been updated.

...I've yet to decide how I want to implement this, and whether or not it should go into a separate add-on specifically for defining "game objects", or similar - Ctx would automatically use it, if it's available.

Nothing too grand is needed - Component already has a setState/render cycle, and nicely separated states and views - the references to the things drawn/rendered, and the re-rendering of them, can (probably) be hooked into the existing component lifecycle, using just states and views.

[sc0ttj]

Done .. See PR #52

This add-on may need re-visiting to enable adding interactivity, easy sprites, tiling/tiled "maps" - anything past that would be out of scope for this add-on, which is basically for drawing/rendering stuff only.