I am passing image to Raphael. Currently image is displaying square, i want the image to displayed in circle format.
<div class="demo"></div>
JavaScript
var r = Raphael("demo")
var myimage="xyz.jpg"
var img = r.image(myimage, 81, 80, 50, 50);
// displaying image in square (need to be circle)
Please help me out. Thanks
The function Element.attr(…), sets the attributes of an element. Perhaps you can create a circle and then fill it with your image. The attr is "fill".
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
That example is from the Raphael's web, you should try:
circle.attr("fill", myimage);
or
circle.attr("fill", "xyz.jpg");
Hope that helps,
Gabriel.
You need to draw a circle and then fill it with an image. This has already been answered here.
Related
I'd like to draw a circle with an empty center like a ring using Pixi.js.
I tried it with a mask and a filter, but I couldn't.
Is there a way to draw it like the picture I posted.
try this one it might help you
var graphics = new PIXI.Graphics()
graphics.lineStyle(/*border width*/10,/*border color*/ 0xFFBD01, 1);
graphics.drawCircle(200, 200, 50);
graphics.endFill();
I adapted an open source game to fit for my fantasy book series, Eloik.
This game
I'd like to replace the blue arc for a png image (about same size).
I know I have to draw an image but how to??
Here's the portion of the code :`
// Shield - Boomlight
context.beginPath();
context.strokeStyle = '#0066cc';
context.lineWidth = 10;
context.arc( player.position.x, player.position.y, player.radius,
player.angle + 1.6, player.angle - 1.6, true );
context.stroke();`
I tried that following code but... The png image doesn't appears at the right spot and it's not interactive with the game as the arc...`
<html>
<body>
<img id="boom" width="176" height="134" src="http://eloik.com/wp/wp-
content/uploads/2017/05/BOOMLIGHT-jeu-bd.png" alt="">
*In the Javascript :
<script>
window.onload = function() {
var image = new Image();
image.src="http://eloik.com/wp/wp-content/uploads/2017/05/BOOMLIGHT-jeu-
bd.png";
context.beginPath();
context.drawImage(image, 10, 10);
}
</script>
</body>
</html> `
So now, what's wrong ?
Thanks ! :)
First, in order to use drawImage, we need to load it. You can do it like this:
/* core.js: line 57 */
// Create a handle for the image
var shieldImage;
/* core.js: line 133 */
// Create a new image
shieldImage = new Image();
// When it's loaded, execute animate
shieldImage.onload = animate;
// Set the src
shieldImage.src = "http://eloik.com/wp/wp-content/uploads/2017/05/BOOMLIGHT-jeu-bd.png";
This way, the animate function will only be called once the image has loaded. Then, in order to position your image and rotate it, you can do this:
/* core.js: line 420 */
// Set the origin of the canvas on the player position
context.translate(player.position.x, player.position.y);
// Rotate the canvas
context.rotate(player.angle + Math.PI + .2);
// Draw the shield
context.drawImage(shieldImage, -player.radius, -player.radius, player.radius*1.5, player.radius*2.3);
// Rotate the canvas back
context.rotate(-player.angle - Math.PI - .2);
// Reset the initial origin of the canvas
context.translate(-player.position.x, -player.position.y);
Since we cannot rotate the image itself, we use this trick, which consists in rotating the canvas, drawing, and reverting the rotation of the canvas. We also translate it in order to have the rotation axis on the player position.
You'll also notice I added some numbers in there. That's because your shield image is not a perfect circle. I distorted it so that it does not look weird with the current collision system (which is based on a circle). If you want to keep the oval shape of the image, you'll need to make more serious changes to the rest of the code so that collisions apply to that shape.
And that's it, your blue arc is replaced with your PNG image (Updated JS here)
PS: You have a cool last name ! - same as mine
I am working on HTML5 canvas with image manipulation. In my canvas I have number of images. When I want to clip the images individually. But when I clip one image by creating a shape and use clip() function, it is working fine. But the problem arise when I try to clip another image using the same method. As the canvas stored the previous shape it will concatenate with the new one and clip the second image accordingly. I want destroy the previous shape. Please note that I can't use the clearRect() to clear the canvas as my previous clipped image is there.
Please ref the link :
Demo Problem
In the link drag the image into canvas predefined layer and drag the image around. You can clearly see that the image got clipped properly if it try to go out of the border.
Now drag another image into the canvas in a different box. Now you can see the clipping is not functioning properly.
Here what I have done in the script :
JS Script
Here the JSFiddle Link
JSFiddle Link
Can you help me to fix this issue?
It will be helpful if you find another way to clear the previous shape.
Thanks in advance.
I have fix the issue by own. The canvas doesn't provide the multiple image clip option. So if you want to clip multiple image in your canvas you have to use your own clip function. Just clear the area by clearRect() of the canvas outside your selection. Iterate this process for each image and you are done !
Solution Link :
Solution Demo
JS Script Link :
JS Script
Thanks.
The best solution I could find is to use a hidden canvas, and draw to that, then use the putImageData method onto your main canvas.
var c = document.getElementById("myCanvas");
var ctemp = document.getElementById("myCanvasTemp");
var ctx = c.getContext("2d");
var ctxTemp = ctemp.getContext("2d");
ctxTemp.fillStyle = "red";
ctxTemp.fillRect(10, 10, 50, 50);
ctxTemp.fillStyle = "blue";
ctxTemp.fillRect(20, 20, 50, 50);
function copy() {
var imgData = ctxTemp.getImageData(10, 20, 50, 10);
ctx.putImageData(imgData, 10, 10);
}
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="myCanvasTemp" width="300" height="150" style="display:none;">
Your browser does not support the HTML5 canvas tag.</canvas>
<br /><br />
<br />
<button onclick="copy()">Copy</button>
I am working with CreateJs and the whole program I am working on is within a canvas element. Within that element I have a few (5-6 areas) where all the elements within it, should now go outside and should be cut.
I have made an image for you that explains the situation. The yellow part is the program. The red border is an area, where all elements within it should not go outside (I put an image in it, which is cut)
Do you have any idea how I can do that?
as mentioned by Marton I just masked the container. Here the code:
var container = new createjs.Container();
var maskShape = new craetejs.Shape();
maskShape.graphics.drawRect(50, 50, 200, 200); // x, y, width, height
container.mask = maskShape;
I am using Raphael-js to position text on a canvas. Is it possible to have a background color for the text? I would like different text elements to have different backgrounds colors.
Thanks,
Yes, there is no way to specify background for text, here is how to create rectangle that will serve as a background:
var text = canvas.text(p.x, p.y, poly.title).attr(textAttr);
var box = text.getBBox();
var rect = canvas.rect(box.x, box.y, box.width, box.height).attr('fill', 'black');
text.toFront();
The background of text is known as "fill" and can be applied using the attr function as follows:
paper.text(50, 50, "Example").attr("fill", "#000000");
For a full listing of the properties, see the Raphael Documentation