We Keep Coding

How to apply multiply blend mode in canvas for specific drawn object to get mix blend mode effect

I have a scenario, one canvas with 4 objects:
Top = a white t shirt
Middle = Hello text and floral artwork
Bottom = Red t shirt
I want to apply multiply effect on Top t-shirt, I am using:
context.globalCompositeOperation = 'multiply';
but it applies to all objects. Please check my fiddle.
On top left the css effect and in bottom canvas effect, I want canvas effect as css effect.
In css I have achieved this with mix-blend-mode multiply. As you can see in fiddle floral artwork's white color is not showing in canvas it's because multiply applied to all object i don't know why.
If you have any better solution let me know.
Regards.

Javascript : gauge image effect

I'm making a 2d game using melonJS.
In my game, i have an arrow which rotate on its axis. This arrow is a png image. When i keep the left mouse button, the arrow needs to fill from yellow to red, from the base to the top. Here's an exemple :
The initial arrow is all light red, like the top of the example image. when i keep the button clicked, the arrow color should change from the bottom with a white line as a current position to the top.
How can i do this with javascript ? Is there any things embbeded in melonJS to handle this kind of trick ?

Since your question is text based rather than code based, I'll do the same.
Here is how to draw your rotated changing-gradient arrow
Clear the canvas with context.clearRect.
Rotation: Translate to your desired center-axis coordinate around which you want to rotate. Then Rotate to your desired angle. Transformations (context.translate & context.rotate) will actually rotate the canvas itself. That way all new drawings will be translated (moved) and rotated. Note: Existing pixels will be unaffected.
Drawing the arrow: Draw your arrow with path commands (beginPath, moveTo, lineTo, ... for each piece of the arrow). Since you have already done your transformations (translate & rotate), you don't need to try to rotate your arrow drawings.
Gradient fill for arrow: Create a linear gradient (context.createLinearGradient) that extends through your arrow drawings. Set color stops (context.addColorstop) to create your desired yellow & red gradient along your arrow. Use the gradient as your context.fillStyle and fill your arrow path with context.fill.
Using gradients for the white indicator line You can also use gradients to display your white indicator bar. To do this, draw your arrow and then overdraw with another gradient that is transparent at all places except your desired indicator percentage where it will be white.
var g=ctx.createLinearGradient(0,170,0,0);
g.addColorStop(pct-0.01,'transparent');
g.addColorStop(pct-0.01,'white');
g.addColorStop(pct+0.01,'white');
g.addColorStop(pct+0.01,'transparent');
ctx.fillStyle=g;
ctx.fill();
Always clean up! Undo your transformations. You can undo transformation by either (1) reissuing your transformation commands in reverse order and with negative arguments or (2) resetting every transformation to defaults by resetting the transformation matrix with context.setTransform(1,0,0,1,0,0).
Put your code into a requestAnimationFrame animation loop and change the angle and/or the gradient to meet your design needs.

You can layer two PNG files, one with the arrow, one with the stripe, and control the position of the white stripe that sits on top of the arrow. Canvas should enable that pretty easily by default, and even more so if you're using a library.

three.js transparent texture and shader material

I'm using a circle texture to render particles:
The circle has transparent pixels. I'm using ShaderMaterial and BufferGeometry to provide custom size, color for each node. However I'm stuck with proper z-index rendering. In the image below:
The white particle is the nearest to the camera, the cyan (0x00ffff) is the second, and hibiscus color on the top right (0xC3206F looks pinkish) is the farthest.
As you can see the order is not correct. Ideally white circle should fully override cyan, and partially cover hibiscus. If I set depthTest: true for ShaderMaterial, the transparent regions of the texture become solid:
Here is the full source code: http://jsbin.com/mikimifipi/edit?js,output
I'm probably missing something with blending or messed up with the shaders. Can you please help?

The particles are rendered in the order specified by BufferGeometry.
If depthTest = true, the material is not becoming solid, as you claim -- the particles behind it (and rendered later) are simply not being rendered at all.
You can improve some artifacts by setting if ( tColor.a < 0.5 ) discard;.
You likely should not be premultiplying your fragment shader output RGB by alpha. That is not the correct thing to do when using the default alpha-blending in three.js. It is also is what is causing the ring to appear around the white disk.
three.js r.71

Display X through div of different sizes

Problem
How would you go about displaying an X through div's of different sizes so it hits all four corners? I want one solid 1px black line to go from the top left to the bottom right of the div, and another solid 1px black line to go from the top right to the bottom left.
Example
If you're not following what I'm talking about, check out my mockup here.
Thoughts
The only solution I can think of for this problem, isn't a solution at all, but just a starting point for thinking about how to implement it. I figure I'd have two solid 1px black lines in the center of the div, and then use CSS to transform: rotate (45deg) on one line, and transform: rotate (-45deg) the other. Of course this isn't a solution that will work with any size div, since the rotation of 45 degrees will only work for a square <div>. I have a feeling I'm going to need some javascript to calculate the rotation angles. I'd really prefer a pure CSS solution, but I'm not sure CSS would be able to achieve this.
Code
Here is the code I currently have. The X is going to be placed through the .overlay class.
Edit
Edit #1: If it helps, all of my images are the same width.
Edit #2: Is there a way to use HTML Canvas lineTo() to reference corners of divs as values?

I think one possible solution for this is a CSS linear-gradient:on the background:. You create a gradient with two color breaks positioned near 50%. Se the middle break to black, and the rest to transparent. This leaves a thin black line for us to angle however we want. Then you just replicate the gradient it and mirror the angle. Something like the CSS below:
.image:hover .overlay {
//your other exising styles
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(49%,transparent),
color-stop(49%,#000000),
color-stop(50%,transparent)),
-webkit-gradient(linear, right top, left bottom,
color-stop(49%,transparent),
color-stop(49%,#000000),
color-stop(50%,transparent));
}
EXAMPLE DEMO FIDDLE
The only remaining issue is that since your images vary in aspect ratio, you can't have your "X" always hit the corners of your image. You'll need to standardize the ratio of your images, or code some javascript that will dynamically do it for each image.
Hope that helps.

Partial border/stroke using SVG

I'm using svg/d3 for creating a chart made of 'rect' elements.
What is the best way for adding a partical border/stroke for each rectangle (only on top of the rectangle)?
Thanks

I don't think SVG supports stroking only portions of a rectangle or path - stroke isn't like a CSS border. You're left with a few other options, all of which take some extra work:
Stroke the entire rect and apply a clipPath to remove the other three edges - probably works best if you make the rectangles bigger than necessary.
Apply a linear gradient fill to each rect, using the gradient definition to show a "border" at the top of the shape.
Add a separate line element to act as the border for each rect.
Use the stroke-dasharray property (docs) to set a dash definition where the "dash" only covers the top of the rect. This might be tricky to get right, but I suspect it wouldn't be too hard, as the stroke probably begins at the top left of the shape.