More completely, I got:
“Cannot set property clientWidth of #<Element> which has only a getter”
(Obviously I could have had a HTML <canvas> element, but this is a minimized example of my problem.)
But I found a solution: Instead of creating elements and appending, write a string of the HTML I want and use innerHTML = string. Is there a disadvantage in doing this?
Change ‘true’ to ‘false’ in the code to demo the solution:
<html>
<head>
<meta charset="utf-8">
<style>
canvas { outline:1px dotted black; }
</style>
</head>
<body>
<script>
"use strict";
if (true) { // this code has the error
let elt = document.createElement('canvas');
elt.setAttribute('id','canvas');
elt.clientWidth = 500;
elt.clientHeight = 500;
document.body.appendChild(elt);
} else { // this has the workaround/solution
let s = '<canvas id="canvas" width="500" height="500"></canvas>';
document.body.innerHTML = s;
}
let ctx = canvas.getContext("2d");
ctx.arc(250,250,200, 0, 6.2832);
ctx.stroke();
</script>
</body>
</html>