Skip to content

0E Drawing images to the canvas

Luis Murillo Baltodano edited this page Aug 30, 2020 · 4 revisions

Need an object like

img {
    x Number
    y Number
    width Number
    height Number
    color CanvasColorString
    rotation RotationDegreeNumber
    image HTMLImageElement
}

More about HTMLImageElement

Use the render function

render(myImageObject).image()

Example

const myImage = new Image(36, 36)
myImage.src = 'picture.jpg'

const myImageObject = {
    x: 73,
    y: 42,
    width: 144,
    height: 128,
    color: '#44f',
    rotation: 45,
    image: myImage 
}

preset(({size, render}) => {
    size()
    render(myImageObject).img()
}, '#canvasForImage')

If the image is not specified this will behave like a regular rect object

Clone this wiki locally