Develop Reference

Javascript draw border around shape on Image canvas

I am searching for a solution to draw a border around all shapes on an Image. I have already tried this solution Draw border around nontransparent part of image on canvas but this doesnt work for me.
Imagine this png
the solution I am looking for should look like this
is there any libary/solution?
Thank you

If you're drawing the all the shapes using ctx.fill(), you can just call ctx.stroke() before each call to ctx.fill(). This will result in a line of width ctx.lineWidth/2, since half of the line will be covered by the shape itself. However, his won't work for other methods such as ctx.drawImage() or ctx.putImageData(). Please specify how exactly you're drawing these shapes to the canvas to receive some more detailed help.
Edit: I think you can use the solution you already mentioned, you just need to make the non-black part of your image transparent. You can do this by editing the the imageData of the canvas:
var ctx = canvas.getContext("2d");
var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
for (let i=0;i<imageData.data.length;i+=4){
if (shouldBeTransparent(imageData.data[i],imageData.data[i+1],imageData.data[i+2]){
imageData.data[i+3] = 0;
}
}
ctx.putImageData(imageData,0,0);
function shouldBeTransparent(r,g,b){
return r!=0||g!=0||b!=0;
}
This will make all pixels that are not entirely black transparent, so you can continue with the method you already mentioned.

Can I give a class to a path drawn on a canvas with javascript?

I'm randomly drawing little stars on a canvas with the beginPath() method like this:
function makeStars(){
for(let i=0; i<100; i++){
let startingX = Math.floor(Math.random()*canvasWidth);
let startingY = Math.floor(Math.random()*canvasHeight);
ctx.beginPath();
ctx.moveTo(startingX, startingY);
ctx.lineTo(startingX-3,startingY+9.4);
ctx.lineTo(startingX+4.5, startingY+3.5);
ctx.lineTo(startingX-4.5, startingY+3.4);
ctx.lineTo(startingX+3, startingY+9.4);
ctx.closePath();
ctx.fill();
}
Is it possible to give each path a class? Something like ctx.classList.add('star');? Ultimately, I was hoping to be able to animate them with CSS.
Thanks!
Edit
Looks like CSS is not the way to go. I think I'll just try to animate my stars with javaScript in a setInterval loop. Here's a codepen of what I'm working with. Twinkling Stars Canvas

No, CSS cannot animate or interact with canvas drawing.
But You can create a Star class which will provide OOP way of updating, rendering and animating the stars.
and then push all of the stars in an array and update/render them on animate loop.
https://codepen.io/anuraghazra/pen/WLLQJv

The short answer is: No. CSS doesn't act on elements drawn on a canvas.
Drawing to a canvas is like drawing directly to paper. You're using the 2D context to act on the pen. While you could figure out a way to read the CSS and perform the animations (by redrawing and redrawing the canvas), I would think that would be way more difficult than any other alternative.
If you're set on using CSS, one alternative is to use SVG+CSS. The elements within the SVG can react to your CSS, much like HTML elements.
If you absolutely have to use a canvas, you could also draw the SVG to your canvas. Convert the SVG to a Data URI, then load that URI into an Image object, which you can then putImage onto the canvas. You would have to figure out how to draw each time the SVG updates, or poll for the new SVG information at an interval (like requestAnimationFrame).

HTML5 context.clip() using image

Is there a way to use an image as a clipping mask instead of creating a shape like this:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Clip a rectangular area
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
I have tried to context.drawImage('myimg.png') on top of the context and clip but that did not work.

You can only directly clip using a path.
If you have an image that you wish to clip by, you can probably achieve this by drawing your content in another canvas, and then using globalCompositeOperation combined with drawImage (with the mask) to remove the bits you don't want.
You would then then use .drawImage again (possibly with a different globalCompositeOperation) to merge that clipped image with your original content.
See for example http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/

HTML5 how to draw transparent overlapping spheres?

I have a complex HTML5 task..
I need to draw transparent overlapping spheres. Please have a look at:
http://imgur.com/7cCkt
I need to draw a sphere which is easy, But, I need to fill it as it look in the picture above (link) and make sure its semi-transparent..
The spheres has to move, so, one time the smaller sphere in the back can be animated and be bigger..
I know its complicated (it looks easy but its hard to program).
Any help will be appreciated!
Thanks!

You can set the globalAlpha value to get the transparency effect:
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.globalAlpha = 0.5;
Something like this jsfiddle

If you want to draw transparent spheres use KineticJS:
http://jsfiddle.net/palani/mN2dC/

How to get complete image inside the circle in Raphael js

I am able to fill the image inside the circle. But the problem is image getting zoomed inside the circle, i want image to be less zoomed or fit into circle.
<div class="disp"></div>
JavaScript
var r = Raphael("disp");
var cir=r.circle(100, 100,33).attr({fill:"url(image.jpg)"});
// image get zoomed, how to make image fit into circle or less zoomed
Please help me! Thanks

You will need to do some mathematics. Don't use attr(fill) - create an image-object and fit it in your circle.
Here is a great example of such behaviour.
BTW, you wrote class="disp" and var r = Raphael("disp"); won't work - this function waits for id.

Here's a solution you can put directly into your code, assuming you're using jQuery as well as Raphael