I'm drawing a game grid with rect() and I'd like some borders of my rectangle have different colors.
exemple: I'd like a rectangle with left and right borders green but top and bottom borders blue, do you see a way ?
Thanks
You can't color rect borders differently, but you can retrace your rect with separate lines:
stroke(0,0,255);
rect(50,50,100,100);
stroke(0,255,0);
line(50,50,50,150);
line(150,50,150,150);
Related
I have a svg rect element. I have "fill: rgb(31, 119, 180);" which renders the rect on the left side of image below.
How can I set the rect style to render the multiple borders like the one on right?
This isn't possible. Instead, you could use a second rectangle. The first one would have a white background with a black border, and the interior one would be blue. Or the first one could just be black, and the interior one would be blue with a white stroke.
I have a number of 2D shapes that interlock with no gaps. I can extrude them to 3D without a bevel and they continue to fit together correctly. However if I add a bevel when extruding, the shapes grow which means they overlap each other when adjacent:
Here you can see that the top of red shape (translated +Z for clarity) is the same width as the gap in the blue shape but that the sides of the red shape have expanded.
Is there any way to achieve an inner bevel which doesn't change the shape's outer dimensions?
How to set stroke color in SVG polygon with different colors? for example we have quadrangle and have to set 2 stroke red and 2 stroke black
Draw 2 paths. Make one path the red parts of the polygon and the other the black.
I have two blocks in HTML5 canvas.
Blue Block ie fixed in the canvas
Yellow Block that can be dragged with mouse.
When someone moves the yellow block over blue block, I want to change the color of overlapping or intersection regions to green. (please see attached image to have clear idea)
Since blue + yellow = green, is there any way to achieve this by changing the opacity level of blocks or I have to search for the overlapping area of the two blocks and display green block in that area or is there any other way?
I would like to know what is the best approach to achieve this?
Have a look at canvas globalCompositeOperation. The lighter composite type seems to fit what you're after.
You could use 3 elements:
Yellow bottom: Opacity 1
Yellow top: Opacity 0.x, same dimensions as the bottom one
Blue: Full opacity between the yellow divs
Example on jsFiddle
This is far from done, but maybe a step in the right direction.
EDIT: I noticed too late that you requested it on canvas, but the principe should be the same there.
I am writing a colouring game for small children, where I have a black and white image shown on a canvas initially, and as the user moves the drawing tool (mouse) over the canvas, the black and white surface gets over-painted with the colour information from the corresponding coloured image.
In particular, on every mouse move I need to copy a circular area from the coloured image to my canvas. The edge of the circle should be a little blurry to better immitate the qualities of a real drawing tool.
The question is how to accomplish this?
One way I see is to use a clipping region, but this approach does not let me have blurry edges. Or does it?
So I was thinking about using an alpha mask to do that and copy only pixels that correspond to the pixels in the mask that have non zero alpha. Is it feasible?
My suggestion is to have your drawable canvas in front of the coloured image you wish to reveal. (You could use your coloured image as a CSS background image for the canvas.)
Initially have the canvas containing the black and white image with 100% opacity. Then, when you draw, actually erase the contents of the canvas to show the image behind.
Like this:
var pos_x, pos_y, circle_radius; // initialise these appropriately
context.globalCompositeOperation = 'destination-out';
context.fillStyle = "rgba(0,0,0, 1.0)";
// And "draw" a circle (actually erase it to reveal the background image)
context.beginPath();
context.arc(pos_x, pos_y, circle_radius, 0, Math.PI*2);
context.fill();
I would probably use multiple clipping regions with varying alpha (one dab for each) to mimic the effect you are after. Render the low opacity one first (paste using drawImage) and render the rest after that till you reach alpha=1.0.
Have you considered using radial gradients that go from an opaque color to a fully transparent one?
Here is a demo from Mozilla. The circles are drawn the way you need. - https://developer.mozilla.org/samples/canvas-tutorial/4_10_canvas_radialgradient.html