Canvas fill shape with text - javascript

I have this example in canvas. I would like to know how I can add text in shapes.
I have looked into the code that draws shapes but not really sure how to add text. I was able to add text but it doesn't move with balls?
function draw()
{
context.clearRect(0, 0, stageWidth, stageHeight);
var i = balls.length;
while(--i > -1)
{
context.fillStyle = balls[i].color;
context.beginPath();
context.arc(balls[i].x,balls[i].y,balls[i].size,0,Math.PI*2,true);
context.closePath();
context.fill();
}
}

You just have to use the ball's x and y value to make sure the text follow the ball, and use textAlign and textBaseline to easily align the text.
function draw()
{
context.clearRect(0, 0, stageWidth, stageHeight);
// Align once an for all.
context.textAlign = 'center'; // Set text align to center.
context.textBaseline = 'middle'; // Set text vertical align to middle.
var i = balls.length;
while(--i > -1)
{
context.fillStyle = balls[i].color;
context.beginPath();
context.arc(balls[i].x,balls[i].y,balls[i].size,0,Math.PI*2,true);
context.closePath();
context.fill();
// Easier to see the text.
context.fillStyle = 'black';
// Draw text `Ball # i` centered at position (x, y),
// with the width of the text equal to ball's size * 2.
context.fillText('Ball #' + i, balls[i].x ,balls[i].y, balls[i].size * 2);
}
}
See altered jsfiddle, is that what you want?
P.S : When playing with canvas, it's always best to keep HTML5 Canvas Cheat Sheet handy.

Related

How can I set a different color for text and background of canvas HTML?

I'm using canvas to create a dynamic Wheel of fortune. Any time I add a new item, it recalculates the spaces evenly. I was able to make it happen using canvas. I know that canvas.fillStyle = somecolor; sets the color I want to the slice that is being created.
I also wanted to put some text inside each slice. However, I can't figure a way to make canvas draw a text with a different color from the color of the slice. Is that even possible?
Here's what I'm doing
const drawSlice = useCallback((deg: number, color: string, text:string) => {
if (!canvasRef.current) {
return;
}
const canvas: HTMLCanvasElement = canvasRef.current;
const ctx = canvas.getContext("2d");
const width = canvas.width;
const center = width/2;
const sliceDeg = 360 / wheelItems.length;
if (ctx) {
ctx.beginPath();
ctx.fillStyle = color;
ctx.fillText(text, center, deg2rad(deg));
ctx.moveTo(center, center);
ctx.arc(center, center, width / 2, deg2rad(deg), deg2rad(deg + sliceDeg));
ctx.lineTo(center, center);
ctx.fill();
}
},[wheelItems.length])
If I understand your problem correctly, you might want to change ctx.fillStyle between the moment you draw the text and the moment you draw the slice.
if (ctx) {
ctx.beginPath();
ctx.fillStyle = color;
ctx.fillText(text, center, deg2rad(deg));
// here :
ctx.fillStyle = color2;
ctx.moveTo(center, center);
ctx.arc(center, center, width / 2, deg2rad(deg), deg2rad(deg + sliceDeg));
ctx.lineTo(center, center);
ctx.fill();
}
You can change ctx.fillStyle whenever you want, as many times as you want.

Canvas special shape - animating

I'm finishing a project, but I have one more step to finish.
I want to visualize microphone input by a canvas.
Getting the data from the microphone isn't a problem.
But I want to visualize it in a special way. (see image)
I want to animate each element from the wave.
My problem isn't the animation.
My problem is to create those shapes in the CANVAS.
This is an example of one shape:
I can create a rounded corner shape with the canvas
const draw = () => {
fillRoundedRect(20, 20, 100, 100, 20);
ctx.fillStyle = "red";
ctx.fill();
};
const fillRoundedRect = (x, y, w, h, r) => {
ctx.beginPath();
ctx.moveTo(x+r, y);
ctx.lineTo(x+w-r, y);
ctx.quadraticCurveTo(x+w, y, x+w, y+r);
ctx.lineTo(x+w, y+h-r);
ctx.quadraticCurveTo(x+w, y+h, x+w-r, y+h);
ctx.lineTo(x+r, y+h);
ctx.quadraticCurveTo(x, y+h, x, y+h-r);
ctx.lineTo(x, y+r);
ctx.quadraticCurveTo(x, y, x+r, y);
ctx.fill();
};
Can someone help me with creating a shape like in the second image?
Thanks in advance guys!
Instead of trying to make a single shape with dependency on surrounding shapes and a high risk of headache math-wise, use instead two shapes which you merge using composition. My suggestion anyways.
Draw all the bars in full height using composition mode source-over (default)
Define a single shape on top using some sort of spline (I would suggest a cardinal spline).
Set composition mode to destination-out and render an enclosed shape using the spline as top "line".
Example
This should work in a loop (remember to clear canvas for each frame) but shows only the building stones needed here -
var ctx = c.getContext("2d");
var points = [];
var skippy = 0;
// render all bars
ctx.globalCompositeOperation = "source-over"; // not needed here, but in a loop yes!
// produce bars
ctx.beginPath(); // not needed here, but in a loop yes!
for(var x = 0; x < c.width; x += 30) {
ctx.rect(x, 0, 16, c.height)
// OKIDOKI, lets produce the spline using random points (y) as well
// but not for all, only every second for prettyness... modify to taste
if (skippy++ % 2 === 0) points.push(x, c.height * Math.random());
}
points.push(c.width, c.height * Math.random()); // one last
ctx.fillStyle = "rgb(198, 198, 198)";
ctx.fill();
// render spline
ctx.beginPath();
ctx.moveTo(0, c.height); // bottom left corner
curve(ctx, points); // spline
ctx.lineTo(c.width, c.height); // bottom right corner
ctx.closePath();
ctx.globalCompositeOperation = "destination-out";
ctx.fill();

Clean text from canvas shapes

How I clean text from canvas shape ?
this my code:
<div id="ways" style="width:1000px;margin:0 auto;height:100%;">
<canvas id="canvas" width="1000" height="1000"></canvas>
and fiddle
Just refactor the code a bit -
Extract the lines which draws the circle into a single function which takes one of those circle objects as an argument:
function drawCircle(circle) {
context.beginPath();
context.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = lineWidth;
context.strokeStyle = '#003300';
context.stroke();
}
Then replace those lines which they came from originally, in the loop with this line (after the circle object has been pushed):
drawCircle(circles[circles.length-1]); // draw last added circle
Now you can use this function in your click events by modifying the code (here, it toggles text on and off):
if (context.isPointInPath(x, y)) {
if (circle.clicked) {
drawCircle(circle); // now we can reuse this function to clear the text
circle.clicked = false;
}
else {
circle.clicked = true;
context.fillStyle = "blue";
context.font = "bold 34px Arial";
context.textAlign="center";
context.fillText("Yeah", circle.x, circle.y);
}
break;
}
Modified fiddle
Just a note with this approach: this will redraw the circles on top of each other. Over time the lines will start to look jaggy due to the added anti-aliasing on the edges. For this reason a full clear of the canvas is better, and then redraw them all. But I'll leave that as an exercise for you.. :-)

Reveal image on canvas with draw/strokes/paint

I want to achive the following:
Draw a bg-image to the canvas (once or if needed repeatedly)
The image should not be visible at the beginning
While i "paint" shapes to the canvas the bg-image should get visible where the shapes were drawn
The parts of the image that will be revealed shall be "painted" (like with a brush) so i want to use strokes.
What i tried:
- Do not clear the canvas
- Paint rects to the canvas with globalCompositeOperation = 'destination-in'
This works, the rectangles reveal the image but i need strokes
If i use strokes they are ignored with 'destination-in' while i see them with normal globalCompositeOperation.
Is this intended that the strokes are ignored? Is there a workaround like somehow converting the stroke/shape to a bitmap? Or do i have have to use two canvas elements?
In OpenGL i would first draw the image with its rgb values and with a = 0 and then only "paint" the alpha in.
You can solve it by these steps:
Set the image as a pattern
Set the pattern as fillStyle or strokeStyle
When you now fill/stroke your shapes the image will be revealed. Just make sure the initial image fits the area you want to reveal.
Example showing the principle, you should be able to adopt this to your needs:
var ctx = canvas.getContext("2d"),
img = new Image,
radius = 40;
img.onload = setup;
img.src = "http://i.imgur.com/bnAEEXq.jpg";
function setup() {
// set image as pattern for fillStyle
ctx.fillStyle = ctx.createPattern(this, "no-repeat");
// for demo only, reveals image while mousing over canvas
canvas.onmousemove = function(e) {
var r = this.getBoundingClientRect(),
x = e.clientX - r.left,
y = e.clientY - r.top;
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.arc(x, y, radius, 0, 2*Math.PI);
ctx.fill();
};
}
<canvas id=canvas width=900 height=600></canvas>
Hope this helps!
Alternative solution:
Put the image as a normal image on your website
add a canvas and use CSS positioning to place it right above the image
Fill the canvas with the color you use as the page background
have your paint tools erase the canvas when you draw. By the way, you can set context.globalCompositionOperation = 'destination-out' to turn all drawing operations into an eraser.
Here is an example. As you can see, the alpha properties of your tools are respected.
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//prepare canvas
ctx.fillStyle = '#ffffff'
ctx.fillRect(0, 0, 120, 120);
//prepare a 30% opacity eraser
ctx.globalCompositeOperation = 'destination-out';
ctx.lineWidth = 5;
ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)';
// make random strokes around cursor while mouse moves
canvas.onmousemove = function(e) {
var rect = this.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
ctx.beginPath();
ctx.moveTo(x + Math.random() * 33 - 16, y + Math.random() * 33 - 16);
ctx.lineTo(x + Math.random() * 33 - 16, y + Math.random() * 33 - 16);
ctx.stroke();
}
<span>Move your mouse:</span>
<div>
<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/120px-HTML5_logo_and_wordmark.svg.png' style='position:absolute'>
<canvas id='canvas' width=120 height=120 style='position:absolute'></canvas>
</div>

Fill polygon on canvas

How can I fill the path that I've drawn in red?
http://jsfiddle.net/MVXZu/1/
I've tried to use fill but it doesn't fill my path as I want it to - that is to fill in the red outline - but instead it fills only a diagonal portion (comment out the ctx.fill(); to see the full outline I want to fill) The code that's drawing the line is this:
//loop through the data
ctx.beginPath();
for (var i = 0; i < data.length; i++) {
ctx.lineWidth=3;
ctx.lineCap = 'round';
ctx.strokeStyle = 'red';
ctx.moveTo(linePosX,linePosY);
ctx.lineTo((i*cellWidth) + cellWidth + padding,(tableHeight + padding) - data[i].v);
linePosX = i*cellWidth + padding + cellWidth;
linePosY = (tableHeight + padding) - data[i].v;
if(i == 13) {
ctx.lineTo(linePosX,tableHeight+padding);
ctx.lineTo(padding,tableHeight+padding);
}
ctx.fillStyle="red";
ctx.fill();
ctx.stroke();
ctx.closePath();
}
Don't put the beginPath into the loop
Don't use moveTo, as that creates a new polygon to fill (see it here, as the result of closePath()). You're at the correct position after the before lineTo anyway. Without it it works better…
Here's the fixed fiddle: http://jsfiddle.net/MVXZu/3/
Pseudo-code:
ctx.beginPath();
// set ctx styles
ctx.moveTo( bottom-left corner );
for each (point in data) {
ctx.lineTo(point);
}
ctx.lineTo( bottom-right corner );
ctx.closePath(); // automatically moves back to bottom left corner
ctx.fill();
Hopefully this is what you were wanting: http://jsfiddle.net/MVXZu/2/
Because you were only running some of the code if (i == 13) {}, only the moveTo and the first lineTo were getting called. This was resulting in a line at the top of the section, but not a box to fill.
I moved a lot of the drawing outside of the loop. It creates the first point in the bottom left of the graph, then the points along the top, then the point in the bottom right. Then it fills in the whole graph after the path is finished.

Categories

Resources