fiddle: https://jsfiddle.net/f8hscrd0/66/
html:
<body>
<div id="canvas_div">
</div>
</body>
js:
let colors = [
['#000','#00F','#0F0'],
['#0FF','#F00','#F0F'],
['#FF0','#FFF','#000']
]
let canvas_div = document.getElementById('canvas_div');
canvas_div.style.position = "fixed";
canvas_div.style.top = "50%";
canvas_div.style.left = "50%";
canvas_div.style.width = "0";
canvas_div.style.height = "0%";
canvas_div.style.transform = "scale(10) translate(-20px,-20px)";
for (i = 0; i < 3; i++){
for (j = 0; j < 3; j++){
let canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 100;
canvas.style.position = "fixed";
canvas.style.top = `${i * 10}px`;
canvas.style.left = `${j * 10}px`;
canvas.style.width = "10px"
canvas.style.height = "10px"
let context = canvas.getContext("2d");
context.fillStyle = colors[i][j];
context.fillRect(-0,0,100,100);
canvas_div.appendChild(canvas);
}
}
Why do the canvases not render over the entire respective canvas element in chrome?
I'm uncertain on how to phrase that question differently. This issue arises when the viewport is an even number of pixels wide and high. It works flawlessly in Firefox or with an odd-sized window. If you don't see the problem, resize the fiddle or your browser window (or open developer tools).
What I would expect to see (and what I see in FF or with odd sized window):
https://i.stack.imgur.com/yC1Ma.png
What I see with an even width document:
https://i.stack.imgur.com/THwZi.png
Upon inspection, it appears that the canvas element itself is the correct size:
https://i.stack.imgur.com/TLkHp.png
Could this be a bug in Chrome, or have I overlooked/misinterpreted something?