I have a very simple code that should draw a circle, but its not looking like one, and not at the right position The coordinates are all somewhat shifted. The canvas is set to style="width: 600px; height: 600px;". I tried it on chrome and safari - looks the same so it's not a browser bug.
So my questions are (there is probably one answer for both):
If I am putting the center at (100, 100), why is the circle not at an equal distance from the left border, that it is from the top border?
Why is the (300, 300) point out of the canvas, and not in the center?
The code:
var context = document.getElementById('c').getContext("2d");
context.fillStyle = 'black';
context.fill();
context.beginPath();
context.arc(100, 100, 30, 0, 2 * Math.PI, true);
context.stroke();
How it looks:
Edit
According to the comment I found out that writing <canvas id="myCanvas" style="width: 578px; height: 200px;"></canvas> is causing this problem, and writing <canvas id="myCanvas" width="578" height="200"></canvas> solves it. Anyone knows why?
This is documented in the HTML5 Canvas spec.
The HTML attributes width="x" height="y" describe the drawing area of the canvas and default to 300 × 150 px. As a side-effect, they describe the default visible size of the canvas.
The CSS properties width: x; height: y; set on the canvas can stretch/compact that drawing area, but they don't change its size.
In your case, the browser stretches the default drawing area (300 × 150 px) to meet the given CSS of 600 × 600 px.
This example shows how to draw a circle on canvas: http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/
Also, you need to set the width and height attributes on the canvas element rather as a style attribute like so:
<canvas id="c" width="600" height="600" style="background-color:yellow;"></canvas>
Related
I have a canvas:
<canvas id="canvas" width="400" height="400"/>
that I want to be able to scale dynamically using javascript, so I want to use scale(). But this is not working:
document.getElementById("canvas").getContext('2d').scale(2, 2);
The canvas remains at 400x400, even though I want it to be 800x800.
Live demo at https://jsfiddle.net/c8sjpr37/3/ using vue. Why doesn't it work?
The scale command is an internal canvas command. It changes the scale at which things are drawn. For example:
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.strokeRect(5, 5, 25, 15);
ctx.scale(2, 2);
ctx.strokeRect(5, 5, 25, 15);
<div id="app">
<canvas id="canvas" width="400" height="400"/>
</div>
This snippet displays a rectangle, and then another rectangle twice the size of the first one and twice the distance from the translation point, because all of the pixel values were doubled with the .scale() command. I don't think this is what you wanted.
There is a way to edit the height and width styling, though. Canvases are picky, so if you change one, the other will change to match the initial ratio, but you can do this with something like:
document.getElementById("canvas").style.height = "800px";
I'm trying to zoom in or out my canvas drawing, but if I only scale the context nothing happens.Do I need to re-draw it after the scale? Is there any method to scale directly the context without drawing it every time I try to zoom in or out?
PS: I want to zoom in and out with an HTML5 <input type="range"> controlled by a script, and that's already working.
Like Mike said, the best solution is to redraw it.
Zooming in with css is a solution, but there's a big loss in quality.
I'm copying my answer from another question I already answered today..
Canvas is like an image. It has it's own physical dimensions but can still be scaled with CSS. Use the width and height attributes to set the physical dimensions and then use CSS to scale it with a % to make it responsive zoom it.
Example...
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.stroke();
<canvas id="myCanvas" width="300" height="150" style="width:100%;"></canvas>
Here is an overly simplified example: https://jsfiddle.net/43ejq0op/
I'm playing around with html5 canvas, and I have came across some strange behaviour. I'm doing pretty basic animation based on these three steps:
I call update() function inside wich I change x and y of the objects.
I clear the canvas with this line of code this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
I redraw all the elements.
This is how I draw the figures:
// drawing a circle
function drawCircle(x,y) {
var rad = 5;
ctx.beginPath();
ctx.arc(x, y, rad, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
}
// and a rect
function drawRect(x, y,) {
var width = 60,
height = 10;
ctx.fillRect(x, y, width, height);
}
Now I expect my rectangle to be 60px width and 10px height. I've added a div after the <canvas> tag and set its width and height to 60px and 10px respectively in order to illustrate the discrepancy. As you can see on the picture, obviously my rectangle isn't 60х10. The same apply to the circle. What am I missing here?
here is fiddle
Set the size of the canvas using it's width and height attributes (for tag) or properties (in JS):
<canvas id="..." width=400 height=400></canvas>
in JS:
canvasEl.width = 400;
canvasEl.height = 400;
Don't use CSS as that only affects the canvas element but not its bitmap (consider canvas as an image). The default size of a canvas is 300 x 150 pixels. If you don't change that size it will be stretched to the size you set using CSS. This is why we in general don't recommend using CSS (there are special cases though where CSS is necessary such as print situations, non 1:1 pixel aspect ratios and so forth).
Probably it's because you styled your canvas to a costum with/height. A canvas' default width/height is 150*300 and if you do not scale well you obtain such result as you found.
drawImage(image, x, y, width, height)
This adds the width and height parameters, which indicate the size to which to
scale the image when drawing it onto the canvas.
So to be short you have to scale your drawings.
the Canvas element on MDN
Canvas drawing on MDN
I just started using EaselJS for a project I'm working on and I'm a bit stuck with the Bitmap Class.. What I do is add a 3000 x 4000 image to the canvas / stage and let the user scale and rotate it. Mainly I'm using the following function:
#width = 3000
#height = 4000
#scale = 0.2
#bitmap.setTransform( 0, 0, #scale, #scale, 200, 0, 0, #width*#scale/2, #height*#scale/2 )
This all works except for the registration point. The number given to the function is half the image width / height, so should be good. But the rotation is still not from the center..
Also I'm looking for a way to increase the quality of this Bitmap or the Stage.. When the Bitmap is scaled to 0.2, the image isn't visible at all, just a bunch of big blocks / pixels..
Hope someone can help me out here,
Thanks in advance
Stupid mistake, my canvas was scaled up so the quality was low even if the image wasn't scaled.
The width and height attributes define the canvas resolution.
The css style width and height define the size of the canvas.
For everybody having problems with quality, you can oversample the canvas:
<style>
canvas {
width:200px;
height:100px;
}
</style>
<canvas width='400' height='200' />
Source:
http://blog.headspin.com/?p=464
I am using the visualisation arborjs and I am trying to implement the zoom-function. This isn't included in the visualisation itself so I had to try some different approches.
I can't use the html5 canvasfunction .scale because with this the positions given by the visualisation don't match the real positions anymore.
For the moment I just increase the height and width of the canvas to zoom in. This doesn't give any problems with the positioningproblem, but I can't scroll in the canvas.
The only problem that I have to solve is the scrollfunction to make this work. So my question is: can I add scrollbars to the canvas when the canvas becomes too big.
Initially the canvas has width 100% and height 100%, so no scrollbars are needed, but when I enlarge this I need those scrollbars.
I tried the css-style overflow:scroll for both the canvas and the surrounding div, but no results.
Here is the relevant code:
HTML:
<div class="explore_area">
<canvas class="explore_area" id="viewport">
</canvas>
</div>
javascript:
zoom: function(){
var canvas = document.getElementById("viewport");
var ctx = canvas.getContext('2d');
sys.screenSize((canvas.width*1.5), (canvas.height*1.5));
}
css:
div.explore_area {
position:relative;
width:100%;
height:600px;
overflow:hidden;
}
canvas.explore_area{
float:left;
height:550px;
width:100%;
}
Setting the width and height of canvas using css is not a good idea. To achieve what you required you should not give width and height of canvas in css. Even if you change the dimension css will reset it.
so first you need to give dimension like this
<canvas class="explore_area" id="viewport" width="400" height="300">
css for container
div.explore_area {
position:relative;
width:400px;
height:300px;
overflow:auto;
}
see the demo here : http://jsfiddle.net/diode/sHbKD/22/ ( not using arborjs)
I can't use the html5 canvasfunction .scale because with this the positions given by the visualisation don't match the real positions anymore.
What do you mean by that ?? If you want to draw an image same place, but zoomed, you can do :
ctx.save();
ctx.scale(ratio, ratio);
ctx.drawImage(myImage, x/ratio, y/ratio ) ;
ctx.restore();
Or if you want to zoom from the middle of the image :
ctx.save();
ctx.translate(x + myImage.width/2, y + myImage.height/2 );
ctx.scale(ratio, ratio);
ctx.drawImage(myImage, - myImage.width/(2*ratio), - myImage.width/(2*ratio) ) ;
ctx.restore();
Rq : For clarity, i did not use Math.floor() on drawImage coordinates, but do it to save draw time in
case your ratio (or your coordinates) are not integer.
My solution is to append a <div>(position:absolute) covering the canvas. It's not good if canvas has interactive.