HTML5 Canvas change color HEX - javascript

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/

Related

Change colour of text foreground based on background color input

I have an input element which allows users to set the background colour of the input element.
When the user sets the background colour of the input element, I want the text in the input element to be a contrasting colour to the original colour.
For example: The user inputs "black" as the input background colour; then the text colour of the input will be white. However if the user inputs "white" as the input colour, the text colour would be black. (There are more cases than just black or white.)
How would I achieve this? I know that you can use another element on top of a background and set mix-blend-mode, but I don't want to because that would remove the point of the input.
Thanks!

You could calculate if black or white would have a higher contrast with the color given by the user based on the hexadecimal value of the color.
This link goes into detail on two ways to do this calculation.
https://24ways.org/2010/calculating-color-contrast/

How can i get the drawing coordinates of text in order to render that text on a canvas element?

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.

How to check is there any background color on canvas?

Following method use to set background color to canvas and I use fabricJS.
canvas.setBackgroundColor(event.color.toHex());
before going to next step, I need to check is there any background color on my canvas. How I do this?

Try this
if(canvas.backgroundColor){
alert(canvas.backgroundColor);
}

Swapping pixels in an icon with javascript?

I have a menu made up of icons and labels. When an icon is clicked the relevant label turns blue. I've recently heard about a technique called swapping pixels, and I wondered if it was possible to make the icon turn blue also?
Pure Javascript if possible!
This is the code that I have at the moment...
function init() {
[].forEach.call(document.querySelectorAll('.navico'), function(el) {
el.addEventListener('click', imageButtonClickHandler);
});
function imageButtonClickHandler() {
this.id.search("aboutnav");
if(this.id.match("aboutnav")) {
grey();
var a = document.getElementById("a");
a.style.color = 'blue';
a.style.fontSize = '15px';
}
the function 'grey' that gets called in the function above is JQuery and was created by my partner so I don't understand it, but it basically turns the selected menu option back to grey after it is deselected or a different icon is clicked.
Thanks in advance.

If the icon is an image, there isn't a way to use JavaScript to modify the image directly. There are, however, techniques for modifying how images look by using other images.
For example, if "turning the icon blue" meant that you wanted to change a specific pattern of colors in the icon you could create another image with just the parts you want to turn blue and everything else in the image transparent (think cut-out). Then, position the image at the same location as your icon with a higher z-index but set its visibility:hidden (or display:none, if you'd rather). Then turning the image blue would just mean showing the image.
If turning the icon blue meant that you wanted it to just have a blue "tinge" to it, you could create a semi-transparent png and use the same technique. You could also accomplish a blue tinge by just creating an element (say a div) and setting the background color to blue, then setting the transparency. In this way you could choose arbitrary colors instead of having to create an image for each color you wanted to use.

copy non transparent pixels only to HTML5 canvas

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

Categories

Resources