Canvas : Getting rid of style attribute - javascript

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 = '';

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 do I add editable text fields on an image?

I am trying to figure out a way to duplicate what they have here:
https://realsteelcenter.com/collections/monograms/products/family-name-circle-monogram
I know they're using Canvas but I am still very new to JS so I am having a hard time figuring this out.
There are a lot of websites using something like this and I am surprised that I have not found anything on this. I was really hoping to have found YouTube video that explains how to do this, but no luck.
Any advice that would push me in the right direction is appreciated.
Start off with an input type="text" field in which you can enter the name and a canvas to render everything in. In JavaScript listen for the input event on the input so you can update the current text every time the value of the input has been changed.
Now in your canvas you'll want to output the text value that has been set by your input. You could do this in the event handler of your input event. So everytime the user changes the input clear the canvas (otherwise it will draw over the previous word) with the clearRect method of the context and then draw the word in the canvas with the fillText method. You'll have to do some extra math to calculate the correct position of the text and can do that with the measureText method.
I've added an example below which will hopefully get you started in the right direction.
const text = document.getElementById('name');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const fontSize = 32;
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
ctx.font = `${fontSize}px sans-serif`;
text.addEventListener('input', function(event) {
const textValue = event.target.value;
const { width } = ctx.measureText(textValue);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillText(textValue, (canvas.width / 2) - (width / 2), (canvas.height / 2) + (fontSize / 2));
});
#canvas {
display: block;
width: 400px;
height: 250px;
border: 1px solid black;
margin-bottom: 30px;
}
<canvas id="canvas"></canvas>
<label for="name">Enter a name</label>
<input type="text" id="name">
Well using jQuery that's easy to do ! You can start with something like following :
<input id='myText' type='text'/>
<div class="container">
<img src="img_snow_wide.jpg" alt="Snow" style="width:100%;">
<div class="centered">Centered</div>
</div>
CSS:
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
jQuery:
$('#myText').on('input', function() {
$('.centered').empty().html($(this).val);
}

Canvas custom font renders wrong

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

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