I'm wondering how can I draw a path of a rect (like how I can using lineTo()).
I don't understand what the problem here is. Doesn't the rect method do exactly that?
It's worth noting that the rect() function is different from the strokeRect() and fillRect() functions. These two functions draw on the canvas immediately without the need for beginPath() or stroke()/fill() calls. For example this draws a rectangle on to the canvas:
context.fillStyle = 'red';
context.fillRect(5,5,100,100);
Related
I am developing a coloring game using adobe air and as3. I have an image with black outline and the user can draw / color the image using a pen tool. I need help to figure out how can I restrict the user to draw within the outlines only. Masking the image with the line-graphics is something I have tried but it hangs the application. Any hint / suggestion towards the solution is appreciated.
following is the code on mouse_down event
_dot = new MovieClip();
_dot.graphics.lineStyle(lineSize, color);
_dot.graphics.moveTo(img.mouseX,img.mouseY);
img.addChild(_dot);
Let's say, the area you are drawing on is a DisplayObject with an instance name of Canvas. What you need is to check if the mouse is on Canvas or not.
In order to do so, you want to use the DisplayObject.hitTestPoint(...) method with the shapeFlag set to true (if it is false, it tests the point against the object's rectangle bounding box, which would produce the wrong results for any non-rectangular or rotated shapes).
So, you do as following:
var P:Point = new Point;
// First, convert coordinates to Stage coordinates,
// because the method requires so.
P.x = Canvas.mouseX;
P.y = Canvas.mouseY;
P = Canvas.localToGlobal(P);
// Now, test if the mouse is within the given canvas.
if (Canvas.hitTestPoint(P.x, P.y, true))
{
// The drawing should happen here.
}
I only want to show a portion of a shape drawn on a canvas.
My line is essentially this, and it works fine:
ctx.fillRect( xPosition, rectHeight - offsetV , rectWidth, rectHeight);
The second variable there is going to be negative. So, my quesiton is: is it bad practice (or am I setting myself for errors down the road) to draw a path that starts off the canvas (with a negative coordinate) and then continue drawing on to the canvas.
No problem at all. If you have very large number of drawing object you can (like GameAlchemist said) prevent drawing that object .If you use canvas like map for explore (zoom out/in ctx, translate whole context) that preventing draw can cost more that clip cost. And its complicated ...
I have some expire with drawing object out of canvas. You can have a problem if you put calculation and other (no drawing) staff intro draw function.
Important :
-Make canvas draw function code clear(only draw canvas code).
-If your app no need for const update make update call only when it needs.
-Clear canvas only in (0,0,canvas.w,canvas.h)
-Use style only when it needs (stroke,fill,font etc.)
I am working on a 2D AS3 project, where the different layers are rendered via Stage3D, in a single drawTriangles() call, as a single mesh.
(if you are familiar with the BunnyMark GPUSprite mini render engine, that will give you an idea: http://www.bytearray.org/?p=4074)
What I would like is to draw one of these entire 'render layers', with an overall alpha transparency value, that would apply to ALL triangles drawn, adding to their own alpha values.
IE I am not looking to change the alpha by using textures with alpha transparency or via having to go through setting each triangle separately to have the same alpha: I want a master switch that would affect the alpha value of everything that is drawn? ( something computationally cheap)
Is this possible? Perhaps via a Shader, or a setProgramConstantsFromVector command?
Well you could render your layer to a texture, then you could put this texture on the stage with the alpha you want, this way your whole layer would have the same alpha!
You can do this in two ways, the first way is to render it to a texture, and display that texture with Stage3D and create a shader that adjusts the alpha.
The second way is rendering it to a bitmapData, and displaying it on the normal stage. I'll give an example for this way:
var bmd:BitmapData = new BitmapData(renderWidth, renderHeight, true, 0);
var bit:Bitmap = new Bitmap(bmd);
bit.alpha = 0.5;
addChild(bit);
//In your render loop at the beginning
context3D.renderToBitmapData(bmd);
Say I have a line drawn with several edges using Shape.graphics' moveTo() and lineTo() methods. Can I modify one of these edges later? so for example:
var line:Shape = new Shape();
line.graphics.lineStyle(2, 0x000000, .75);
line.graphics.moveTo(10,10);
line.graphics.lineTo(50,50); // Can I modify coordinates of the edge created on this line?
NO, you can't. Once drawn there is no reference to the lines, so you can't modify them. You need to clear the graphics and redraw again.
I want to animate the endpoint of a bezier curve to x,y coordinates in an html5 canvas without redrawing the entire stroke. Basically, I need to make the endpoint look as though it is draggable, and when dragged, affects the length of the line.
This is my current standard bezier stroke code:
var canvas = document.getElementById("myCanvas"),
context = canvas.getContext("2d"),
controlX1 = 140,
controlY1 = 10,
controlX2 = 388,
controlY2 = 10,
endX = 388,
endY = 170;
context.moveTo(188, 130);
context.bezierCurveTo(controlX1, controlY1, controlX2,
controlY2, endX, endY);
context.lineWidth = 10;
context.strokeStyle = "black";
context.stroke();
Does anyone have any ideas how this can be accomplished without using a library like Raphael; however, I am using jQuery, so that is an available resource.
without redrawing the entire stroke.
That's not possible. The way you animate things in HTML5 Canvas is by (clearing and) redrawing them.
library like Raphael
For the record, Raphael uses SVG, not HTML5 Canvas, and SVG makes this sort of thing much easier because it is a retained drawing surface.
Canvas is an immediate drawing surface. As soon as you draw something (like a curve) the canvas has no knowledge of what was drawn or where it is. You have to keep track of everything yourself. I feel like I parrot this a lot but I wrote a simple tutorial on learning to retain the necessary information to make canvas feel persistent like SVG that can be found here.
That being said, you might be better off using SVG (and not Canvas) if your planned app/site is not going to be very complex or intensive.