Canvas custom font renders wrong - javascript

Using a custom #font-face within a canvas element, renders fine in DOM, when rendered through canvas it stretches the text vertically. Or might be squashing it horizontally, cannot tell.
CSS:
#font-face {
font-family: 'myFont';
src: url('myFont.ttf');
}
Canvas element width is set to 100% of its parent (a 300x250px square) through CSS, text is added to canvas by:
cContext.fillStyle = "rgba(255,255,255,1)";
cContext.font = '58px "myFont"';
cContext.fillText("1000", 22, 71);

var c = document.getElementById("square");
var ctx = c.getContext("2d");;
ctx.font = "40px Arial";
ctx.fillStyle = "#FF0000";
ctx.fillText("1000",40,80);
var c2 = document.getElementById("notsquare");
var ctx2 = c2.getContext("2d");;
ctx2.font = "40px Arial";
ctx2.fillStyle = "#FF0000";
ctx2.fillText("1000",40,60);
#square, #notsquare{
border: 1px solid red;
}
#notsquare{
width: 300px;
height: 400px;
left:0px;
}
<canvas id='square' width='300' height='300' ></canvas>
<canvas id='notsquare' width='300' height='300' ></canvas>
Example from #pointy remark.
To specify the width and height of the canvas element you should use the attributes of the element and not css.
if you want to resize the canvas you should do so in the JS like this
Resize HTML5 canvas to fit window

Related

Setting the width/height inside HTML differs from what happens in CSS [duplicate]

This question already has answers here:
Canvas is stretched when using CSS but normal with "width" / "height" properties
(10 answers)
Closed last year.
I am having a lot of confusion trying to figure out what is happening. I am drawing some boxes in using javaScript. I am following this guide to recreate breakout.
Breakout Tutorial
The trouble that I am having is that the canvas size does not work if I am using external css to set the width heigth like so below, the css doesnt work.
#myCanvas{
width: "480";
height: "320";
}
However if I change the code to in my html to this
<canvas id = "myCanvas" width ="480" height="320">
</canvas>
The box is the right size. Why cant I set the height and width out of the html?
Here is a JSfiddle of the box with the right size.
If you move the css width/height over to the external side it doesn't work anymore. What gives?
There is a difference between inline tags (id, class, width, height, style, ...) and css attributes (width, height, font-size, ...).
If you want to use the css attributes width and height you need the remove the "" and add the unit.
e.g.
#myCanvas{
width: 480px;
height: 320px;
}
You can also add css inline using the style attribute:
<canvas id = "myCanvas" style = "width: 480px; height: 320px">
A canvas has 2 sizes, the dimension of the pixels in the canvas (it's backingstore or drawingBuffer) and the display size.
The number of pixels is set using the the canvas attributes in HTML.
<canvas id = "myCanvas" style = "width: 480px; height: 320px">
which is separate from width and height that are in canvas's CSS style.
myCanvas{ width: 480px; height: 320px;
Changed your code to understand better.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(10, 10, 30, 20);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(30, 80, 20, 0, Math.PI*2, false);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.rect(10, 140, 30, 40);
ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
ctx.stroke();
ctx.closePath();
canvas {
background:#eee; border:1px solid #ccc;
width:200px;
height:300px
}
<canvas id="myCanvas" width="100" height="200"></canvas>

How to draw a GIF on a canvas?

I have a game and I need to add animations. I have GIFs that I want to draw on the canvas. How do you draw a GIF on a canvas? Is there a way to do this without getting each frame of the GIF? I have tried to just draw it as an image, but it only draws the first frame of the image.
Use invisible image as the source:
const image = document.getElementById('my-image');
const canvas = document.getElementById('my-canvas');
const ctx = canvas.getContext("2d");
ctx.drawImage(image, 10, 10);
canvas {
border: 1px solid gray;
}
img {
visibility: hidden;
}
<canvas id="my-canvas" width="240" height="240" ></canvas>
<img width="32" height="32" id="my-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAADcCAMAAAAshD+zAAAAwFBMVEX52yz///8AAAD5+fn22CsDAwEIBwEFBAFTSQ/v0ir8/PzTuiVKQQ329vYSDwMLCwuqqqrozCmZmZlkWBKFdRfqzilQRg67u7vl5eU1LgmVgxogHAbHryPjxygNCwIlIQd2dnYcHBxCOgylkR2QkJAqJQe2oCBrXhNbUBAWFAR9bhZzZRQ2NjZCQkKZhxu+pyI6MwoqKippaWkVFRWtmB/Z2dlWVlazs7NkZGQvKQiIiIhMTEwtLS3R0dEcGQXBwcHt2g7SAAAQLklEQVR4nN1d2XbiMAydQEKBsIadEspe1u6UdtpO//+vBhK8ZbUcJ6G9D3POzJkkutiWZEmW/yi/GH8S+Uq5+9Xp1Go1wzj+0el8dcuJfDZWcsX9wRi9bsfVjAvV8fZ1ZHT2xTi/Hxe5cmf2tvUg5SK5fZt14hrHOMh1a0/bcFoUtMc34ysGQWSTKx+exiBiGOOng+wRlEquO9tpYsxsVHezrkx55JHrGrsoxBC2EvlJIpetSWFmQdvVsnKkkkJuP3oOlvdqNX+Y5PPLRmOZz08e5qur4P//PNrLkEsCuYP/oOV6y01/obf+uNDSF/1NvpfzfXR3SJ9c2Xj0Fq5SWk911c2KhapP16WK9xsejaizMxq58l/P+Xi9vNPDaNHQ75bXnrNzFs04RCGXNTxMWm7SHECIYYL9ksccff4bhZ44uaIHtVz+pSDCzEZhmnfzGxvi7qcwuY5rrV21pxGYIX5tlyL97CRMbv/qFOGmaUZlZsNs3jjfvRM0DELkyiOHl6Xl7+Uws7FoO98/Elp6IuS+HTNy2ADpRh7ot47V9ygyN+Hkym/sZyvNumxqJ9TXDvP3BB88MLkOqyOHaw/3Qw5a6yHzqTF48IDksiPme7l1LKOGUN+wk3MEdFlg5PafzMfy0teaE+aS+eAnbL8OImcwQZGeVA3ph/se/c1qLSZy2SdmsfWToHaE2meW3hNgavKT6zJBn5Ikk80Ds01/ecu/U+cm9037/6tpctROmK5orcm98HjJ1ejlNklw2GyYJZGFx0luRr0710ya2gl92ir8lUiuSKuSeez63xv6nFYrXPsgHnJF2uHKR97WiKKQp8R45VGaHOSy1PZGS2VKIvSpvd4Hh6sZTq5MBbcqidhtfywqIHah5GhuNyktNwKdCiTtQtmFkct+kLf1ErcAbtQfKHZh6y6EHM0tPVVCo0C5K68hOjOYXJHSJcvQCGsyUBvc7ILJUfbtNm1SGOotkepJnNxf8pZN2pRorIlcM1FytUscNwsbIllQviSA3Ff1Urn9+UNmZvVbhFyX7HEaaXNxQSXhh7H//s6XXJbsTfMXoidpqMQi+Js7X3JEUfYuwr45USDW3Fdl+pEjyuT6AvwSL9RJSsGAkdtjZVJJ3Z/0g4696KpPosSbXBbHJ7WU9wFBWOB0ydZ72XmTI3HlVPdvYWhiMUf85DpEUaYtfzDI3twzj+BFroxzHfOLVJQELRxXGXtt7rzI4ZBJTih1nyR0HBPzsgce5L7xWCcVMY8Asuw83DA3uTLOm5bSlpwHOFr76J6YbnJYU64u1HqzMHGk3a0xXeT22HgknA8QxRSbZJcpd5HDQZMfMSlPwBPzNYwcNnHDHzEpTzBx/s5p7Bzkslib/ABNidBHMn8WA8kZ6P/10pYYAPUdSW0EkSO+yQX7y27cYz8lG0AOp+GWacsLA/YxZ/7kyihskvsx2sSGibww1sVkyOE45UVFKXmw8Rw6mlwWDdww1rqgOFBH5uC57EMOq8p12rLCgYPQhg85ZOMqsdWqxYcWCqg8epM7IPIXHVrwAx66gyc5lEL9eSvuhDpSmDsvcntE/eISA3zA6YO9Bzm0j9MuNlAZDB3t1UZuctgOXHjAyx8oe/CcdZHD8fMf5VXSWCAGNRc5pE5uwC8t9Btr2FQe5FfztfzUESrj2DnJddGMBduBl5OFyb0Anlhb3ypJj4niSFjXQQ7tB66gLnPf/lU0/hAn8gOlO7Amqp6aOcihVGMb+EKcjOjxTrM79PteSVfLKJqyY8l10ReBIS+TFGMtOJ8gFcvSXVgcCOsy5NCszAEXAlUZz7m/pQqAruHiB6OAvJQZQw7pSqCRGxBJMyvwExnpW2L0y+1ocmWUSIUovT90ColXVOYJ4NfCgeZltUyRQxsC4KzUNaioJvOE9O0HnpcHihwqXQBGmde0pJk7jieazBPyXfTJ+c1PFDkU0QP+lO+MqDwPPzBPyI+xoR9vTMjh3Q7M8uiMpDxGmZ2VMfjoWKQuJoecZqBu7jOS8pitF/aJGKKj/86vrmFyaMkBa7warKgc03LDPhFDTRkyvE+YHKo64VEJFOasqBypkwl4IkOBZtMnIldGKwG25FTHiW4OU/CPfSKGTBJadFr5TA7l5Cpi70EI3xeojhPSnO4oCMjZ/T6TQ44l0Mrds5Jq4dFO588RR7QG7QxmZ3Ko7gTopU9ZSefhTwzYJ/i8USCQY/F2Jof2ckBXz0GOQ/U5xhq6dwRJtbXJFZHXDJwld6yoHKrWQS6WyDaa+tWiRQ75JzlgyIYlp3FsChzTMpYkoIp8571FDm0JoGlw1t2YcDzBKpSY0u7I4e1Y5FDmCuoMsePAY7MK4CcEgHaMhkUOxdGh/kKLlrTCtRO8AT8BB3LxRhY5dBgJ/EvSovKZkSX4CTiQA/ZqkUOWAOwvUKKu+NJelA5axZXhRFH1rUUO7VTB/sKCiMrpcrfIeejYyuaQ1hpb5JCZA/+UKj5jye244SRafCdo6ucvVE/kyue/XMHfg4zBnPt3aZ2rIycxnqBB3nn5SA4Fm0U8PXsgHgDWeGCxa8R5OghVl3aP5L7Qzy/yov51Zt4HSWqu87fx1oWjPfTXkRzazT3E+sUEgSJs30dyyPv6MZWxYZicCXUocrFsQNIA2q4ejuRQXO/HJvqdQM5ljSL3w0os/bGkyKFNweUdTBUECqcav53cr56Wv1qh/GpT8KuN+K92vyI5zpcIFP34irjluUigVEg32mb1IqHSm1XxMMNlggkzhAWI1PSPvqhrQI6GDRAFh/amlVzq1epTSJSTDe0FBmVPkcbUD6+eHCrufD0blA0Kpw9Oee/Ua/FPuY0cb1iVDacHJEIKNxfhu1glmjxppBPYRAhyUTxSSnYO9l2qpHCotnycSoVNYfknH8+dD9I272flPucKITqSj/5p44n970P58oKAlDuXYnOkjbEtcD6MouVaDAJDYJ7luOYZOkfC369Uo4DzHCmbcZzl5MkgOks1fIpsSDItZUOnIjl4hs5ZZONTHkUqDlM+EW9iQcItueosj/IpbGuRQth0T52Rap6b0KFzFbb5lSQWGvi4R1xyc2GCyYUfEUPTbesqJnX5KHqjkv6qo0tCQg25u5g0oAxYXWxOzk8lRYVJHUVYhZZ3uMuA8Ukez7Vl+SnpBf6ogrHwNtIeBdwhpfdWPXtq/VFItcskXK+h0vtHj0MT3p63errJIq0eYNggPfDUySDdQx+aCDnuop+W3U0qMRb7RJrW4zs46nncBR9U8tGKlqVpp9Gg9ORwXN3x/q6eB5VCj5hZaaEU+lHcwZa75xGz0MOBhZO3okk/EhYGS1HzbsGp6iv2cGDosU6rMdowYTescCop4Q6e+B7rxPPS157dn0JF/5K15Za7ATim4nMgF89L/1JlSye/J6kyLaMFSPjiM16GgxzHIXir0GuSXDtP65Q2xAChfarmPATP0b7A7gudWMdqq9kvZJXjCskPxUkON57wdwTsvtAJsTNvoPo5oPEEbhkS4CLbfaFjrSdEsHfKoGMVAS1DuJq92PePJFCxYk8SUPVIULMXvjY9+r9Exk61lHoJ9Bl8DtOrTQ9WKYEpK5tdO16daXODNaQ3AxsskdZYgT6kblXZTuK0dwWL2xyWFsRn1jue5EhTs8DX2mP3Hp+vUphY3GAfwE3NPhVvcpzt6EyriPg6Lj/T7AlwI+eY/drRZVG0IaSfrH2r0TCeiJitkN+BqWrcSJBp3ynUAtJeFJlNDEpzYUnZg6bhw1tAkq6rYduM861GJemlAE2x3ks6R/NO0nY1tD7RvqXwWm6TsLo9I27BMwK3x2E75rLksvwNcwd2+LMh0eINrOWmwYOI2KsMbJhLtToO/fVMuzpuLivkp9rtwCrwk/Eq7qMQ2OpYKeLLQcJ/P/XWkuZKTu+1gZ1TgpwLQsAdZEKaVMPai9/b0eCb6G0IWvYPJbDczlFVC84rC6I1hm+dvdWo11Ofb8BdCf1K/I3hqRt5uIz0iy3W1W0Ed+z+XNu6FHoHDnlVXZdiRb6MoX7OUA43gvQG519ecHKTnnHua3Pd5Ejje85o6OB843fuVmByLibnh9eCNoVco+G+eEjGBSjq9Bya0SYvIIXQ6qP8VFt00QIvQKEuMONOW6l9dJZyteF+5iWPnKYHYUcHfHWN0KVDhT4uybnZ3IeOX32ax2tlIm5JWjgzyX3pkPKN2+kAssXqtIenSKXUvPf9XcyXTQ9/4GoZxcMhLRc9L0eUetHXoEGaV2au5vn19N6kBrGuv/Q3E/pS9+tmpA290EVf9BVtsDlTmJYcPaUyw9VNr9e7vq44/j2zuo24pxC8oi3K5Xqt6XLl5OHGO8fCDIHo5XoRr0VU9f7y2pPTCbne7YuE8JJJyhxqPiTiu9Cydd+/bffoQRzeTBrrqS4nOFEg6st7wQWRy5J7xKNl+lumPhgMdL0uNeKiYs8ks/O9vTngElls7S7mQmqCiJfIXvb1v6RBY/XLn0EAOeWgXSo70kpSE7y4mQqGXdhlNlSbTOErt9nL0i9m3dFXwfsqSg5y5G7Ly9EqlC7JvEW55l4pvpI3xZyU40SB2IDMazC3MHJK9oO8q5f+McFzDuhs4Hzv2uYkp5SJMY8vbcUNnfLqdl5bOBg5pUyNnUA4WCoW1NbiI5QbBzklS607LYarPfjRpHrSfoTNST5ySpHSmZlSaoeSW9RVB6G6hJucUqTsnbzMBxADum9hsH0DkVMUg5oQuWYaU7NJ2vRltEC/BExO6VSp322SuE0wKeuWqQb5kyLklK8x9fpVwsdfpnQAZhywDxAkp3Qpg3fUKwkOnklrkszOf/8mTk7J0molM4S12BOHSq+2oyrhUZNwcopSoxde5j2RK8EWzHUWVb9YUHRyyn5LfylTit0dM5fMB7c+MTwp5JTsiPlYbhNrUwpzw8xIbcThlUQgpyjfY4becB0bvfpmyHxq7JkPkEpOKTN65ehMx0PPXLPUMk/hjnJ0csfBe2Q/m1tKX3v6bY79xiN42ATJHVdelf201pa5F1IXbceVFNW/wNUWgdzRor9lHPgnmvB3wmy60gwfMCUZldzR2fx0inDVnkaOsrSmJc353k+RGRmNnFI0xk4xMrl8FH6FaTvneuXYALgk0sgdl54HvYz20BTa8On9kptZ5vkvXEfKIXc0CzMPesf1t+yD9KfeX/7zes94FoVaVHKn0Xv0EuuU8+dJxan6dF1yJZRtfBpCKlIiuSMOO2/hMqckan7TX+geVr6uL/qb/LvHTDxj1wn/cgLkjv706NlXSAvaav4waefzjUY+3548zFculcjieSSo/FlIIXecnbVdiLz80D5qUefjGZLIHdE1PmTw2874d9phkEfuiO5sVw0X3x/VnURmimRyR5QPT57WIRyPT4doit8N2eRO6B5GW9AM1R7fDCkaxIE4yJ1Q/p69bTnmaHX7NvuWPWIIcZGzUNx3jNHrduxBsjrevo6Mzl7cceRArOQwyt2v706tVjOM4x+d769uXGPFIhlyKeE/np0+H988dEMAAAAASUVORK5CYII="/>

Canvas : Getting rid of style attribute

How to get rid of style which is automatically generated by canvas?
Chrome:
<canvas id="g_2" width="604" height="304" style="-webkit-user-select: none; touch-action: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 302px; height: 152px;"></canvas>
Firefox:
<canvas height="157" width="1076" style="-moz-user-select: none; width: 302px; height: 152px;" id="g_2"></canvas>
P.S : I am not using any javascript to add style.
To create canvas, I am using angularJS which is ng-repeating over an canvas element using an array, to add a new canvas , index is appended to that array. Here is the code snippet:
<div class="tab-content" data-ng-repeat="tab in someArray">
<div role="tabpanel" class="tab-pane active">
<canvas id="someID_[[tab]]"></canvas>
</div>
</div>
After canvas element is created, setting width and height as follows:
var canvas = document.getElementById(canvasId);
canvas.width = width;
canvas.height = height;
When you set the canvas height and width also set its style
var canvas = document.getElementById(canvasId);
canvas.width = width;
canvas.height = height;
canvas.style = '';

Canvas element lines aren't straight?

I am trying to draw an element on a canvas but whenever I draw the canvas, the lines turn out faded and not bold. I don't understand why this happening with my code.. whenever I try it with code from W3schools it turns out fine. Here is my code and an image below.
<!DOCTYPE html>
<html>
<head>
<title>Talk Walk</title>
<style type="text/css">
#canvas {
position: absolute;
top: 0px;
left: 0px;
height: 500px;
width: 750px;
background-color: blue;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
The problem here is that there's some aliasing going on when you're drawing the rectangles.
This is happening because the "edge" of the green rectangle isn't drawn exactly on a pixel. Normally, you wouldn't really see it, but since you're stretching out the canvas by using css to set it's width and height, you get this result:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0,0,150,75);
#canvas {
height: 500px;
width: 750px;
background-color: blue;
}
<canvas id="canvas"></canvas>
To fix that, use the width and height HTML attributes, instead of css:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0,0,150,75);
#canvas {
background-color: blue;
}
<canvas id="canvas" height="500" width="750"></canvas>
This properly scales the canvas, so the aliasing (while still there if you zoom in) doesn't scale up.

How to change the height and width of canvas using css while using fabric

As the title says everything. I want to change the size of my HTML5 canvas. I am using fabricjs library to work with HTML5 canvas. However, fabricjs makes the size of the canvas smaller. Now I want to its size using css but it does not affect it. When I give other css rules to canvas then it does affect but not width and height.
jsfiddle
Here is my fabricjs code
var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
left: 50,
top: 50,
fill: 'red',
width: 100,
height: 100
});
canvas.add(rect);
here is my html
<canvas id="c"></canvas>
and here is my CSS
#c {
width: 100%;
border: 1px solid green;
}
Found the answer. Below solution works for me
var canvas = new fabric.Canvas('c');
canvas.setHeight(500);
canvas.setWidth(800);
Second solution is
<canvas id="c" width="900" height="600"></canvas>

Categories