Why would my canvas scale itself in converting html to DOM calls?

Question

In refactoring my code to avoid calling the innerHtml member, a new bug crept up. I only converted html strings to DOM calls. No bugs are thrown in the chromium inspector. I am using mercurial, and the old version still works. I hunted around and:

alert(ctx.getTransform());

Returns 1,0,0,1,0,0 which is the identity transform. But my canvas is still scaled wrong. I don't call anything other than basic line and stroke members.

function buildColorTool() {
    var pick = document.createElement("DIV");

    var canvas = document.createElement("canvas");
    canvas.style.width = "200px";
    canvas.style.height = "200px";
    canvas.id = "wheelCanvas";
    pick.appendChild(canvas);
    document.getElementById("toolWindow").appendChild(pick);
}

Is broken, but:

 function buildColorTool() {
    let toolWindow = "<div class=\"toolDialogue\">";
    toolWindow += " <div id=\"colorPicker\">";
    toolWindow += "     <canvas id=\"wheelCanvas\" width=\"200\" height=\"200\"></canvas>";
    toolWindow += " </div>";
    toolWindow += " </div>";

    document.getElementById("toolWindow").innerHTML = toolWindow;
 }

Works. I used hg diff -c 25 ./script.js > changes.txt, is there a better set of mercurial arguments for posting to stack exchange?

Use `canvas.width = 200;` (same for the height) instead of setting the style, otherwise you'll get a 300x150 canvas distorted to 200x200. — , Dec 24 '20 at 20:11
Thanks, that's my solution @Chris G. I'm going to try making the minimum reproducible now. — Scrambled eggs, Dec 24 '20 at 20:29
Duplicate: [Canvas width and height in HTML5](https://stackoverflow.com/questions/4938346/canvas-width-and-height-in-html5) — , Dec 24 '20 at 20:39

score 0 · Accepted Answer · answered Dec 24 '20 at 20:28

The problem is, is that you set the width and height of the element through it's style tag. This however causes problems with canvas elements. Generally the height and width attributes are used for the actual sizing, and the CSS width/height is used for scaling.

Solution Change

function newColorCanvas() {
   var pick = document.createElement("DIV");

   var canvas = document.createElement("canvas");
   canvas.style.width = "200px";
   canvas.style.height = "200px";
   canvas.id = "wheelCanvas";
   canvas.innerText = "Canvas tag not supported";
   pick.appendChild(canvas);

   var select = document.createElement("P");
   select.id = "colorSelection";
   select.innerText = "HSL: 135, 75, 50";
   pick.appendChild(select);

   document.getElementById("toolWindow").appendChild(pick);

   paintCanvas(135,75,50);
   canvas.addEventListener('click', function() {updateCanvas();});
}

to

function newColorCanvas() {
   var pick = document.createElement("DIV");

   var canvas = document.createElement("canvas");
   canvas.width = 200;
   canvas.height = 200;
   canvas.id = "wheelCanvas";
   canvas.innerText = "Canvas tag not supported";
   pick.appendChild(canvas);

   var select = document.createElement("P");
   select.id = "colorSelection";
   select.innerText = "HSL: 135, 75, 50";
   pick.appendChild(select);

   document.getElementById("toolWindow").appendChild(pick);

   paintCanvas(135,75,50);
   canvas.addEventListener('click', function() {updateCanvas();});
}

If the question turns out to be a duplicate, please don't answer it but flag it as such. You can of course always post comments to give additional help to the OP. — , Dec 24 '20 at 20:39

Why would my canvas scale itself in converting html to DOM calls?

1 Answers1