deno-canvas canvas & 2D context & image objects do not match the browser

[backspaces]

A few experiments show that the deno-canvas's canvas, context, and image objects do not match the browsers. This makes it difficult to impossible to have interoperability between deno and browsers, a goal of many of us.

Some examples:

// copy/paste these into a deno repl (deno repl -A)
import {
    createCanvas,
    loadImage,
} from 'https://deno.land/x/canvas@v1.4.1/mod.ts'

// creaate image, canvas & ctx
const imgUrl = 'https://code.agentscript.org/models/data/redfish.png'
const img = await loadImage(imgUrl)
const can = createCanvas(200, 200)
const ctx = can.getContext('2d')

// 1: ctx has a flawed canvas object:
typeof ctx.canvas // OK, "object"
// but it isn't!
ctx.canvas.width // TypeError: Cannot read properties of null!
Object.keys(ctx) // shows no canvas object!
ctx.canvas = can // TypeError: Cannot assign to read only property 'canvas' of object

// 2: ctx has width & heigh while in browser ctx.canvas has the width & height
// see above

// 3: img width & height are functions, not properties as in browser
img.width // [Function: Image$width]
img.width() // works: 512

// 4: prototype programming fix works for ctx.canvas, but alas not for img
const ctxObj = {
    canvas: can,
}
Object.setPrototypeOf(ctxObj, ctx)
ctxObj.canvas  // OK
ctxObj.canvas.width  // OK

const imgObj = {
    width: img.width(),
    height: img.height(),
}
Object.setPrototypeOf(imgObj, img)
ctx.drawImage(imgObj, 0, 0, can.width, can.height) // TypeError: k.width is not a function
ctx.drawImage(imgObj, 0, 0, imgObj.width, imgObj.height) // Ditto

[crowlKats]

that module is a third party module maintained by the community, not an official module maintained by Deno. I'd recommend opening an issue on the repository of the module.