[svgwg] Layout size for drawing an embedded SVG to a canvas (#784)

shallawa has just created a new issue for https://github.com/w3c/svgwg:

== Layout size for drawing an embedded SVG to a canvas ==
Consider the following SVG:

`<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>`
    `<rect fill='pink' width='50%' height='100%'/>`
    `<circle fill='purple' cx='50' cy='25' r='15'/>`
`</svg>`

If this SVG is embedded in an <img> element:

`<img src="data:image/svg+xml,`
   `<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>`
        `<rect fill='pink' width='50%' height='100%'/>`
        `<circle fill='purple' cx='50' cy='25' r='15'/>`
    `</svg>"`
>`

And the <img> element has the following CSS properties:

`img {`
    `width: 100px;`
    `height: 50px;`
`}`

This will make the circle of the SVG drawn in the center of the <img> element because the layout size is (100x50) and the center is at (50x25).

If this <img> element is drawn into a canvas whose CSS properties are the following:

`canvas {`
`    width: 200px;`
`    height: 100px;`
`}`

using the following script:

` var image = document.querySelector("img");`
`var canvas = document.querySelector("canvas");`
`canvas.width = canvas.offsetWidth;`
`canvas.height = canvas.offsetHeight;`
`const ctx = canvas.getContext('2d');`
`ctx.drawImage(image, 0, 0, canvas.width, canvas.height);`

The question is what layout size should be used for the SVG when drawing the embedding image into the canvas?

1. Will it be the size of the <img> element: (100x50)? In this case, SVG will be scaled 2x to fill the drawImage() destination size. So the circle will be scaled and drawn at the center of the canvas.
2. Will it be the destination size of CanvasRenderingContext2DBase::drawImage(): (200x100)? In this case, the SVG will not be scaled and the circle will be drawn at the same position and the same size as when it is drawn in the <img> element.

This test case is attached to https://bugs.webkit.org/show_bug.cgi?id=206914.

Please view or discuss this issue at https://github.com/w3c/svgwg/issues/784 using your GitHub account

Received on Wednesday, 1 April 2020 22:23:08 UTC