2c:null 2d:["$","title",null,{"children":"CanvasImageSource | Sylvain Lesage | Observable"}] 32:T888,md`# CanvasImageSource [CanvasImageSource](https://developer.mozilla.org/en-US/docs/Web/API/CanvasImageSource) is a pseudo-interface that describes what [CanvasRenderingContext2D.drawImage()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage) and [CanvasRenderingContext2D.createPattern()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createPattern) accept as their first argument \`image\`. > _Understanding source element size_ > > _The drawImage() method uses the source element's intrinsic size in CSS pixels when drawing._ > > _For example, if you load an Image and specify the optional size parameters in its constructor, you will have to use the naturalWidth and naturalHeight properties of the created instance to properly calculate things like crop and scale regions, rather than element.width and element.height. The same goes for videoWidth and videoHeight if the element is a \`