So i saw this wiggling rainbow text
https://codepen.io/mikel301292/pen/eBROMJ
So it looks like this:
var logo = "232.5,115.4,228.3,30.0,164.1,30.0&96.1,30.0,30.0,99.4,30.0,205.9&30.0,290.1,98.0,345.9,160.3,345.9&295.3,345.9,339.7,127.5,339.7,78.9&339.7,-23.4,303.7,86.4,303.7,176.9&303.7,205.8,314.4,345.9,381.8,345.9&473.4,345.9,504.8,128.4,504.8,68.9&504.8,1.4,473.0,62.6,473.0,146.1&473.0,195.5,486.6,345.7,539.8,345.7&609.9,345.7,661.0,182.9,661.0,115.9&661.0,-65.1,616.1,93.0,616.1,112.9&616.1,157.9,741.1,71.7,741.1,71.7&741.1,71.7,674.1,168.2,674.1,267.8&674.1,308.9,698.8,345.9,735.3,345.9&851.2,345.9,850.7,53.0,850.7,53.0&850.7,53.0,911.3,208.9,918.5,349.1&997.2,349.1,1024.5,189.5,1024.5,64.8&1024.5,0.8,985.4,43.5,985.4,115.4&985.4,185.6,1085.0,192.3,1135.7,192.3&1200.8,192.3,1295.4,180.3,1295.4,105.3&1295.4,71.3,1272.7,49.2,1240.6,49.2&1189.5,49.2,1124.6,125.9,1124.6,236.9&1124.6,277.0,1143.1,346.4,1206.7,346.4&1246.2,346.4,1305.1,305.9,1325.5,257.0";
And i want to change the text but i cant find any tools that can give me the right "coordinates". I tried it in Adobe Animate but its just not the same.
Why not try opentype.js? Given you have a true type or opentype font file you can then get the coordinates of a given text string and then use fabricjs to render it on a canvas. At that point you can animate it or apply different colours.
I'd like to edit HSL of an image via Javascript, not as a whole of (although it would be somehow helpful) but for each set of colors (Blues,Yellows...), like in photoshop.
Which is the data structure I must use ?
Which are the formulas for mapping this colors ?
Is there any helpful library for that ?
Thanks!
You can do this using a combination of blending mode and pixel iteration:
Extract the bitmap and iterate over each pixel
For each pixel, determine if it's within a certain range (ie. "blues") on the HSL color wheel. You would also need to use variable width, that is, at the edges the intensity is lower than in the center. Remove pixels that aren't in the range.
Put back the bitmap to a new canvas with the resulting bitmap
Use fill style set to destination HSL value (you can use HSL directly with fill-style, ie. "ctx.fillStyle = "hsl(180,100%,50%)") and fill the entire canvas using compositing mode "destination-over" which will change the overall color.
Change blending mode on main canvas to "color" and draw the extracted pixel canvas on top.
I have a question about my HTML5 canvas, how can I change the color of a shape using HEX?
I have been able to change the color and size of a text but I would like to do the same to a shape, in this case a circle.
Right now you enter a text in a textbox and you can change color and size.
Also, I want to be able to click on the canvas to paint one circle, then change color and make another circle in a different color than the first one.
My code for the text jsfiddle.net/e43nfx1d/4/
My code for the circle jsfiddle.net/w8wsv7sr
It was pretty easy to do the changes on the text but now, with the circle, Im totally lost.
/Wilma
As I realized your question, your problem is to changing the color of filled circle.
There isn't any big problem here; You can change it as the same way of changing the text color.
Just like this:
context.fillStyle = "#333";
// Or any other color format that css supports
Here's your working example: http://jsfiddle.net/76koy1x7/
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
I have a dynamically generated graph that illustrates the range of items that will fit within a container, relative to the item's width and thickness. I'm trying to show that the items near the edge of the "fit range" might not be as good of a fit as those closer to the middle of the graph. To do this I'd like to fill my shape with green, which has a gradient that turns to yellow around the edges. This yellow area should be of uniform thickness around the entire inside edge, as illustrated in the image below. How might I accomplish this with Raphael? I know how to do a solid fill; the gradient is where I'm having difficulty. Thanks in advance for your help!
In theory it should be possible to do this by slicing the graph into four triangles.
Each triangle can then be filled with a gradient that is mostly your solid color but at one end it turns into your edge color. By setting the right angle on the gradient you can make it look like only the edges on the graph have a different color.
I've created the rectangle above using the following code.
var slice1 = paper.path("M200 200L100 100L300 100").attr({
"fill": "90-#0f0:70-#ff0:95",
});
var slice2 = paper.path("M200 200L300 100L300 300").attr({
"fill": "0-#0f0:70-#ff0:95",
});
var slice3 = paper.path("M200 200L300 300L100 300").attr({
"fill": "270-#0f0:70-#ff0:95",
});
var slice4 = paper.path("M200 200L100 300L100 100").attr({
"fill": "180-#0f0:70-#ff0:95",
});
Your case will be a bit more complex though. You will have to first find the middle of the graph to be able to slice it into triangles. Then you need to find the angle for each of the gradients.
Evening,
It's not as easy as it looks like it should be. Probably due to an issue with how to implement it in VML.
The best I was able to do is to use a slightly larger clone of your target object behind the original, and then use a gradient fill on it.
I've made an example in this fiddle
Hope that helps.
You could use a radial gradient on an overllying ellipse but that will leave a rather large corner of yellow
To find the centre of your object use good old getBBox()