Consider a 4x4 pixel HTML canvas element.
The coordinate system spans from (0,0) in the top left to (4,4) in the bottom right.
This represents a 5x5 grid.
It seems like the canvas squeezes one extra pixel in each dimension, without changing the width or height. How do I account for this if I want to draw precise pixels on an NxN canvas?
The coordinates (x,y) don't index pixels as if the canvas is a 2-d array.
In this case the region between grid lines does coincide with single pixels, but if we treat the canvas as a pixmap, then a pixel is the space between gridlines.
To draw pixel (i, j) with top-left corner at (x,y), do
canvas_context.fillRect(x, y, 1, 1);
Related
I have an SVG element and I am rendering child circle elements with given x, y pixel values/coordinates.
The children are rendered relative to the default origin which is the top left corner of the parent SVG. Is it possible to change this origin?
In my case, I have pixel values/coordinates based on a center origin with both positive and negative x, y values (see this image https://d20khd7ddkh5ls.cloudfront.net/img13_71.jpg) so it would be very convenient if I could set the origin of the svg rather than having to translate the coordinates.
It's easy enough to set a transform-origin, so how do I set a 'coordinate-origin'?
Thanks
I have begun working with SVGs and have (quickly) hit a road block.
I am trying to find a way to and a border around a rectangle but for it to only "expand" inside. Currently I am just drawing a path around the rectangle and using stroke width. This has the desired effect of showing a "filling" animation when used with css transition. But I don't want it to expand outside of the bounds of the rectangle. See images
with path
As you can see the stroke width is going in both directions, outside of the bounding rectangle and inside. How would I get rid of the outside bit?
Draw the <rect> within an inner <svg> element which is the same size as the <rect>. The inner <svg> element will clip the <rect>.
You can also do this with a clip-path or a clip if you want but the inner <svg> way is simpler.
I don't believe it is possible to have the stroke only appear on one side of the line (someone correct me if that's wrong).
Here are two approaches to achieving the effect you want:
Approach #1:
Simply put the bounding rectangle before the filled inner rectangle in your SVG. The filled rectangle will be "above" the bounding rectangle due to SVG precedence rules, and if you expand it to the right size it will cover up the inside part of the bounding rectangle's stroke.
Approach #2:
Set the stroke-width to half its current value, then draw the bounding rectangle half a stroke width further out in all directions.
I am using canvas 3d to draw a 3D graph.But by default origin of Coordinates is at top left.For which i used translate and bring it to the center of canvas as follows.
canvasElement.getContext('2d').translate(constants.canvasWidth/2, constants.canvasHeight/2);
where canvasWidth and canvasHeight are already defined.
But now i have another problem with the direction of axis.Now positive y axis is facing down and -ve y-axis facing up.How can make it proper so that +ve y-axis faces up and -ve y-axis faces down?
Please help
Instead of offsetting the centre calculate the y position.
Subtract the y value from the height of the canvas/2.
x1 = canvasHeight/2 + x;
y1 = canvasHeight/2 - y;
I tried to google it but couldn't find a solution.there are method to draw a triangle with one given angle and two lengths .but i want to draw triangle with given two angles.Can some one guild me..
A triangle is defined correctly only by 2 sides and angle between them, 3 sides, or 1 side and both angles containing that side. Using three angles you can only define a set of triangles. The first commenter said draw a pixel, and he's mathematically correct, as a triangle with infintely small sides, but with 3 correct angles, will be displayed as a single dot. So, you need to define at least one side before you can get a correct displayed triangle.
Suppose I have some arbitrary input image with width w1 and height h1. I want to rotate this image all the way around 360 degrees back to the starting position. However, if the image is of anything except a circle, then the edges of the image will be clipped if the canvas it is drawn onto remains at size w1 by h1.
What I need then is to determine the canvas size (width w2 and height h2) that can be used for all rotated versions of the input image. I know that w2 == h2, and thus the desired canvas size is a square, because it is obvious that we are rotating something about a center point, and the final image (after 360 rotations) is essentially a circle.
The other thing to consider is that objects such as squares will have corners that will stick out, so just using the max value of width or height for both dimensions also does not work.
One solution I have come up with is to create the canvas larger than I need (for example by setting w2 and h2 to max(w1, h1) * 2, rotating everything, and then trimming all the transparent pixels. This is not very efficient and I would much rather be able to calculate the tightest bounding box upfront.
This is a geometry question. You essentially want to find the diameter (d) of a circle that would inscribe your original canvas and then w2 = h2 = d
The diameter of such a circle would be √(w1^2+h1^2)
So w2 = h2 = √(w1^2+h1^2)
Also, to avoid clipping, you might want to take the ceiling of that result rather than rounding.
If the image being rotated in a square, you'd have to make the canvas height and width the same length as the hypotenuse.
w = h = sqrt(h^2 + w^2)
(I do not know actionscript)
However, if the image you have is not in a square, you'll essentially have to find the point farthest away from the center...
PS: It's late and I'm rambling, so I'm sorry if this might be wrong.
Your canvas need to be a square.
If you are going to rotate a body like the green figure around any point (in this example Point A), the side of the square is the double of the distance to the most distant point to A in the body.