deno-canvas canvas & 2D context & image objects do not match the browser #34
Description
This is from a deno issue, denoland/deno#18919
The response was:
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.
Here's the issue & thanks for the great project!
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
I believe the man problem is Image using functions for width/height, we might be able to work around the rest. Or do you have an insight how we might work around that issue too?
Thanks!