Children of the Canvas

Can I make a canvas accessible with its fallback DOM? Does it get positioned properly?

by David Iglesias

HTML

<canvas id="drawing" width=640 height=480></canvas>

CSS

canvas {
  position: relative;
}

canvas * {
  position: absolute;
}

JavaScript

const ctx = drawing.getContext("2d");

ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);

// Add accessibility child into canvas, matching the stroke rect
let link = document.createElement('a');
link.style.width = "50px";
link.style.height = "50px";
link.style.top = "50px";
link.style.left = "50px";
link.href = "https://www.google.com";
link.innerText = "Google!";
link.target = "_blank";

drawing.appendChild(link);