I want to generate my canvas in javascript. Sizing it via ‘style’ doesn’t work. (Option ‘a’ in my code) Why?
But the way to do it is with canvas.width and .height (Option ‘b’). The default size is Option ‘c’.
<html>
<head>
<meta charset="utf-8">
<style>
canvas { outline:1px dotted black; }
</style>
</head>
<body>
<script>
"use strict";
let option = prompt('a, b, or c','a');
let canvas = document.createElement('canvas');
canvas.setAttribute('id','canvas');
switch(option) {
case 'a': // setting size with style - NG
canvas.setAttribute('style','width:500px; height:500px;');
break;
case 'b': // setting size with .width/.height - OK
canvas.width = 500;
canvas.height = 500;
break;
case 'c':
default: // default size
option = 'c';
}
document.body.appendChild(canvas);
let ctx = canvas.getContext("2d")
ctx.font = '20px Ariel';
ctx.fillText('Option: '+option,10,20);
ctx.arc(250,250,200, 0, 6.2832);
ctx.stroke();
</script>
</body>
</html>