Fill property in raphael js - javascript

I want to create a sphere in Raphael which should look like
I am using Paper.ellipse with equal horizontal and vertical radius to draw sphere.
I think I need to tweak fill attribute to achieve effect as shown in image. Also I want sphere in different color with same effect.
Can anybody point out any helpful link about fill property in Raphael as I couldn't find enough information?

Used
function ball(x, y, r, colour) {
paper.ellipse(x, y, r, r).attr({
fill: "r(.3,.25) white-" + colour,
stroke: "none"
});
};
You can use any color like yellow or color code like #00CC33 for hue.
Demo.
Demo Source Code.

You can watch the source of this page: http://raphaeljs.com/ball.html. Basically, it consists in drawing several ellipses to simulate a single enlightened sphere.
You can learn more about gradient in Raphael on this topic.

Related

D3 fill shape when draw with path

I'm using D3 to draw a certain shape layout for my map and the drew area has to be shaded. I am using line path to achieved the shape, What I couldn't figured out is how do I shade (fill) the area with a certain color. See picture for an example shape, just random in this case for visual aid.
you need to checkout the fill style property on paths.
<style>
path {
fill: red;
}
</style>
In order to fill the area described by these paths, simply assign the CSS attribute fill.

How to clear rectangle on Image in Canvas

I need to clear a rectangle Drawn on Image in Canvas with out damage existing image. I can draw small rectangle points and clear that out. But the problem is when I clear rectangle it remains as white small patch on image.
Can someone tell me how to clear a rectangle on image without damage the existing image.
I have used following methods to clear rectangles but didn't work.
1) context.fillStyle ="white";
2) context.clearRect(xCoordinate, yCoordinate, 10, 08);
Thanks in advance!
Canvas doesn't work that way. It's a single layer, its also transparent by default. So with that in mind, you might be able to achieve what you want by simply giving the canvas element a CSS background. That way anything you draw on top of that background can easily be removed and the background will show through.
#backed-canvas{
background-image: url(http://www.placebear.com/300/200);
}
JSFiddle example: https://jsfiddle.net/yLf5erut/
There is one thing you can do.
When create a rectangle on the canvas just get the image data like:
var imgData = context.getImageData(xCoordinate, yCoordinate, 10, 8);
and draw the rectangle.
When clearing out the rectangle just place then image data back like this:
context.putImageData(imgData, xCoordinate, yCoordinate);
I suggest using 2 canvas elements one over another.
So you can have the original image drawn on the bottom canvas with low zIndex, and the top one with highter zIndex can be used to draw / clear whatever needed. This is a common practice, and for more complecated animations you will end up with better performance.

HTML5 canvas clipRect is not working properly

Fiddle Link:http://jsfiddle.net/rorLnaqt/3/
Open the above link. I have draw two spline series within a rectangle and clip rect two spline when it is draw out of the rectangle. If i use clipRect option, spline series is not rendering properly. if i comment it is working fine.
The below fiddle output image is expected result:
fiddle Link:http://jsfiddle.net/rorLnaqt/4/
In that i have removed clipRect option.
Any one please give the idea to solve this problem. clipRect() is must for each series for my scenario. So i can't remove clipRect.
Thanks,
Bharathi
Remember to also use beginPath() when defining the clip path, otherwise the old paths will serve as basis for the clip (e.g. the border square for the first clip mask and the spline for the second clip mask):
context.beginPath();
context.rect(47, 20, 833, 351);
context.clip();
Updated fiddle

JavaScript Canvas createPattern

I have problem with canvas createPattern. I have two boxes, both will move after pressing a keyarrow:
Example:
http://jsfiddle.net/wA73R/1/
The problem is that the box background filled by createPattern also is moving. How to avoid that? Is there any solution? The big box is only an example (drawImage is not the good solution for me, I need something that will repeat background image).
Thank you for help
The problem is that the box background filled by createPattern also is moving.
Actually your problem is that the background is not moving - it is static, while you are drawing your rectangle to different positions.
How to avoid that?
The pattern will always be drawn at the coordinate origin, whose actual position is defined by the current transformation. In future you will be able to transform the pattern itself with the setTransform method, but since that currently is not implemented anywhere you instead will have to change the global transformation matrix.
In your case it means, that instead of drawing your rectangle at x/y, you translate the whole context to x/y and draw your rectangle at 0/0 then:
ctx.fillStyle=pattern;
ctx.save();
ctx.translate(boxes[i].x - left , boxes[i].y);
ctx.fillRect(0, 0, boxes[i].width, boxes[i].height);
ctx.restore();
(updated demo)

Have a background image in paper.path with raphael?

I want to put some background image to my paper.path I've created with raphael
paper.path(arc([xCenter, yCenter], radius, startAngle, endAngle)).attr({
'stroke': "#ccc",
'stroke-width': rinc - 1
});
The result:
http://jsfiddle.net/n4Rvr/
I just want to put some image instead the #ccc color. Is it possible? However, I didn't find something interesting on internet.
You want to fill the stroke of the path? There's no support for using patterns on the stroke in Raphaël, so it's not as easy as it is in pure svg, where you can either stroke with a pattern or mask an image with the given path to get the effect you're after.
To get something similar in Raphaël you'll need to build the stroked path as a new path, basically tracing around the inner and outer arcs so that you can fill it. Then use 'fill' instead of 'stroke' and pass in the url of the image you want.

Categories