Notes on Day 8 of 30 Days of JavaScript

• notes • series • javascript • javascript30

I rarely use the following array methods in my work so it is great to refresh my memory on their capabilities.

Table of Contents

Lessons Learned

HTMLCanvasElement.getContext()

This returns a drawing context on the canvas, or null if the context identifier is not supported, or the canvas has already been set to a different context mode.

<canvas id="draw" width="100%" height="100%"></canvas>

const myCanvas = document.querySelector('canvas#draw')
const myContext = myCanvas.getContext('2d')

Its first parameter, the contextType can be 2d, webgl, webgl2, or bitmaprenderer. These will dictate the way the context will be renderered.

CanvasRenderingContext2D.globalCompositeOperation

This is a property of the Canvas 2D API sets the type of compositing operation to apply when drawing new shapes. It requires the 2d contextType for declaring a context.

<canvas id="draw" width="100%" height="100%"></canvas>

const myCanvas = document.querySelector('canvas#draw')
const myContext = myCanvas.getContext('2d')

myContext.globalCompositeOperation = 'color-burn'

Its values are similar to Photoshop or other photo editing tool’s filter and manipulation presets.

mouse events

Property Definition
mouseup This is fired at an element when a cursor is released while the pointer is located inside it.
mousedown This is fired at an element when a cursor is pressed while the pointer is located inside it.
mousemove This is fired at an element when a pointing device is moved while the cursor’s hotspot is inside it.
mouseout This is fired at an element when a pointing device is used to move the cursor so that it is no longer contained within the element or one of its children.

References

Twitter LinkedIn