Clean text from canvas shapes - javascript

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.. :-)

Related

HTML Canvas : Fill Arc based complex shape

Below is a JSON structure which draws arcs with different start and end angle
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var elementDetail = {"element":[{"type":"ARC","x1":510,"y1":10,"x2":74.585653306513848,"y2":74.585653306514814,"r":1500,"xm":510,"ym":1510,"alpha":4.4178734952765524,"beta":4.71238898038469,"color":2},{"type":"ARC","x1":74.585653306514587,"y1":74.585653306514928,"x2":10,"y2":510,"r":1500,"xm":1510,"ym":510,"alpha":3.1415926535897931,"beta":3.43610813869793,"color":2},{"type":"ARC","x1":10,"y1":510,"x2":74.585653306514587,"y2":945.41434669348541,"r":1500,"xm":1510,"ym":510,"alpha":2.8470771684816563,"beta":3.1415926535897931,"color":2},{"type":"ARC","x1":74.585653306514871,"y1":945.41434669348541,"x2":510,"y2":1010,"r":1500,"xm":510,"ym":-490,"alpha":1.5707963267948966,"beta":1.8653118119030334,"color":2},{"type":"ARC","x1":510,"y1":1010,"x2":945.4143466934853,"y2":945.41434669348541,"r":1500,"xm":510,"ym":-490,"alpha":1.2762808416867597,"beta":1.5707963267948966,"color":2},{"type":"ARC","x1":945.41434669348541,"y1":945.41434669348541,"x2":1010,"y2":510,"r":1500,"xm":-490,"ym":510,"alpha":0,"beta":0.29451548510813697,"color":2},{"type":"ARC","x1":1010,"y1":510,"x2":945.41434669348519,"y2":74.585653306514132,"r":1500,"xm":-490,"ym":510,"alpha":5.9886698220714489,"beta":6.2831853071795862,"color":2},{"type":"ARC","x1":945.41434669348553,"y1":74.585653306514587,"x2":510,"y2":10,"r":1500,"xm":510,"ym":1510,"alpha":4.71238898038469,"beta":5.006904465492827,"color":2},{"type":"POINT","x1":510,"y1":510,"color":7}]}
ctx.beginPath();
elementDetail.element.map((elem, index) => {
ctx.arc(elem.xm, elem.ym, elem.r, elem.alpha, elem.beta);
})
ctx.closePath();
ctx.stroke();
ctx.fillStyle = "#6fd0ff";
ctx.fill();
canvas{ zoom:.25}
<canvas id="myCanvas" width="1200" height="1200"></canvas>
The shape that I need to obtain is this:
I was able to loop through the json and fill draw stroke but not able to fill color inside the shape
I need help to fill the shape with color
Thanks

To avoid weird results, in complex shapes , I would rather perform the drawing in two steps :
Solid body rendering: draw and fill the shape
Outline rendering : draw the shape outter stroke
Note : When drawing arcs you need to know that ctx.arc() will create a line from the last coordinates of the current path, to the first position of the arc.
In order to avoid it, you need to call moveTo() to lift the drawing pen to the first position of the arc.
var elementDetail = {"element":[{"type":"ARC","x1":510,"y1":10,"x2":74.585653306513848,"y2":74.585653306514814,"r":1500,"xm":510,"ym":1510,"alpha":4.4178734952765524,"beta":4.71238898038469,"color":2},{"type":"ARC","x1":74.585653306514587,"y1":74.585653306514928,"x2":10,"y2":510,"r":1500,"xm":1510,"ym":510,"alpha":3.1415926535897931,"beta":3.43610813869793,"color":2},{"type":"ARC","x1":10,"y1":510,"x2":74.585653306514587,"y2":945.41434669348541,"r":1500,"xm":1510,"ym":510,"alpha":2.8470771684816563,"beta":3.1415926535897931,"color":2},{"type":"ARC","x1":74.585653306514871,"y1":945.41434669348541,"x2":510,"y2":1010,"r":1500,"xm":510,"ym":-490,"alpha":1.5707963267948966,"beta":1.8653118119030334,"color":2},{"type":"ARC","x1":510,"y1":1010,"x2":945.4143466934853,"y2":945.41434669348541,"r":1500,"xm":510,"ym":-490,"alpha":1.2762808416867597,"beta":1.5707963267948966,"color":2},{"type":"ARC","x1":945.41434669348541,"y1":945.41434669348541,"x2":1010,"y2":510,"r":1500,"xm":-490,"ym":510,"alpha":0,"beta":0.29451548510813697,"color":2},{"type":"ARC","x1":1010,"y1":510,"x2":945.41434669348519,"y2":74.585653306514132,"r":1500,"xm":-490,"ym":510,"alpha":5.9886698220714489,"beta":6.2831853071795862,"color":2},{"type":"ARC","x1":945.41434669348553,"y1":74.585653306514587,"x2":510,"y2":10,"r":1500,"xm":510,"ym":1510,"alpha":4.71238898038469,"beta":5.006904465492827,"color":2},{"type":"POINT","x1":510,"y1":510,"color":7}]}
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d")
// draw the solid body
ctx.beginPath();
elementDetail.element.map((elem, index) => {
ctx.moveTo(0,0);
ctx.arc(elem.xm, elem.ym, elem.r, elem.alpha, elem.beta);
})
ctx.fillStyle = "#6fd0ff";
ctx.fill();
ctx.closePath();
// draw the outline
elementDetail.element.map((elem, index) => {
ctx.beginPath();
ctx.arc(elem.xm, elem.ym, elem.r, elem.alpha, elem.beta);
ctx.stroke();
})
ctx.closePath();
canvas{ zoom:.25}
<canvas id="myCanvas" width="1200" height="1200"></canvas>

Have you try to use context.fillStyle="your shape colour"?
I think you might use a path to build shape, so every time you start path, you need to assign a colour to every shape.
Try to draw arc and polygon seperately.
function drawGraphics(ctx){
ctx.beginPath();
ctx.fillStyle="#6fd0ff"
elementDetail.element.reverse().map((elem, index) => {
if(elem.type==="ARC"&&index<=8){
ctx.arc(elem.xm, elem.ym, elem.r, elem.alpha, elem.beta);
}
})
ctx.stroke()
ctx.fill();
ctx.closePath();
}

Html5 Canvas stroke transparent gradient line

How do I create a transparent gradient stroke that using html5 canvas? I need it to go from one point to another and look like the below image.
At the moment I have got this:
const gradient = ctx.createLinearGradient(1, 0, 100, 0);
gradient.addColorStop(0, '#fff');
gradient.addColorStop(1, '#d29baf');
ctx.lineWidth = 30;
ctx.strokeStyle = gradient;
ctx.beginPath();
ctx.moveTo(fromXPos, fromYPos);
ctx.lineTo(toXPos, toYPos);
ctx.stroke();
This makes it look like a solid block though like:
Thanks.

Fill a shape
Use a shape and fill it with the gradient.
You can use CSS colour type rgba(red,green,blue,alpha) where red,green,blue are values from 0-255 and alpha is 0 transparent to 1 opaque.
To create a shape you start with ctx.beginPath() to create a new shape then use lineTo(x,y) to mark out each corner. If you want to add another shape using the same fill or stroke you use ctx.moveTo(x,y) to move to the first point.
Note many people use ctx.beginPath(); ctx.moveTo(x,y); but that works just the same as ctx.beginPath(); ctx.lineTo(x,y); As the first point after beginPath is always converted to a moveTo for any type of path object.
const ctx = canvas.getContext("2d");
// draw first box (left of canvas)
ctx.fillStyle = "#ab7383";
ctx.fillRect(20,100,50,50);
// draw second box (to right of first)
ctx.fillStyle = "#904860";
ctx.fillRect(100,20,50,130);
// gradient from top of second box to bottom of both boxes
const g = ctx.createLinearGradient(0, 20, 0, 150);
g.addColorStop(0, `rgba(${0xd2},${0xba},${0xaf},1`); // opaque
g.addColorStop(1, `rgba(${0xd2},${0xba},${0xaf},0`); // transparent
ctx.fillStyle = g;
ctx.beginPath();
ctx.lineTo(70, 100); // top right of first box
ctx.lineTo(100, 20); // top left of second box
ctx.lineTo(100, 150); // bottom left of second box
ctx.lineTo(70, 150); // bottom right of first box
ctx.fill(); // fill the shape
<canvas id="canvas" style="border:2px solid black"></canvas>

unable to make background colored for a rectange on html5 canvas

I added this lines in order to make color of border and background GREEN for a rectangle, but without success:
context.fillStyle = 'green';
context.fill();
context.strokeStyle = 'green';
context.stroke();
Here my code in JSFIDDLE:
https://jsfiddle.net/f5z8qtcp/1/
How to make the green rectangle colored too in the background ... grey rectangle while creating it must be like it is, i want just to color the result (Border already colored to green).
Thank's.

Use fillRect function:
function drawAll(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth=1;
ctx.strokeStyle='green';
ctx.fillStyle = 'green';
for(var i=0;i<rects.length;i++){
var r=rects[i];
ctx.strokeRect(r.left,r.top,r.right-r.left,r.bottom-r.top);
ctx.fillRect(r.left,r.top,r.right-r.left,r.bottom-r.top);
}
}

Bouncing Ball On JavaScript with background and a Gradient

Hello I'm trying to create a ball on JavaScript that possess a background with a Gradient as the ball passes by, by far my code for the ball bouncing seems to work, when I try to fill the background with:
context.fillStyle = "rgba(0,0,0,0.10)"; //this is what i am trying to do as the gradient
context.fillRect(0,0, canvas.width, canvas.height);
is when I mess everything up I'm not sure what am i doing wrong any help is kindly apprecciated, the one below is the approach I have taken for the bouncing ball :
<script>
var context;
var posX=100;
var posY=200;
var dx=5;
var dy=5;
function bouncyBall()
{
var canvas = document.getElementById("circleCanvas");
context= canvas.getContext('2d');
setInterval(draw,10);
}
function draw()
{
context.clearRect(0,0, 800,600);
context.beginPath();
context.fillStyle="orange";
//to draw the circle
context.arc(posX,posY,20,0,Math.PI*2,true);
context.closePath();
context.fill();
// this will do the boundares
if( posX<0 || posX>800) dx=-dx;
if( posY<0 || posY>600) dy=-dy;
posX = posX+dx;
posY = posY+dy;
}
</script>
<body onload= "bouncyBall();" >
<h1>A Ball Bouncing!</h1>
<canvas id = "circleCanvas" width="800" height="600">
</canvas>
<ul>
</ul>
</body>
</html>

Here's how you create a linear gradient for use on your ball-canvas:
// think of createLinearGradient as a line
// the gradient will follow that line
var orangeGradient = context.createLinearGradient(
canvas.width/2, 0, canvas.width/2, canvas.height);
// then define where each color will be along the line
// (0.00==start of line,1.00==end of line)
orangeGradient.addColorStop(0, '#ffdd00');
orangeGradient.addColorStop(1, '#cc6600');
// and finally set the fillStyle to your new gradient
context.fillStyle = orangeGradient;
context.fill();

html5 javascript fillstyle doesnt work

I'm dabbling with html5 and javascript (I know nothing of both). I found an example of some html5, copied it, and started experimenting. Heres some code. The idea is that when any key is pressed, two squares start moving left (doesn't clean up behind it yet). What I don't understand is why I cant change colour (Ive indicated below). Any ideas? Im obviously doing something very wrong.
<!doctype html>
<!-- this source copied from http://www.xanthir.com/blog/b48B0 -->
<canvas width=800 height=800>
</canvas>
<script>
var canvas = document.getElementsByTagName("canvas")[0];
var context = canvas.getContext('2d');
var x = 230;
var y = 380;
// First, we'll paint the whole canvas black.
context.fillStyle = "black";
context.fillRect(0,0,800,800);
context.fillStyle = "red";
context.fillRect(0,0,30,30);
context.fillRect(0,100,30,30);
context.fillStyle = "green";
context.fillRect(0,200,30,30);
// Now we'll draw some shapes
// circle
context.fillStyle = "#06c";
context.strokeStyle = "white";
// These can be any CSS color.
context.lineWidth = 3;
context.beginPath();
context.moveTo(450,250);
context.arc(375,250,75,0,2*Math.PI,false)
context.closePath();
context.fill();
context.stroke();
// A triangle! And a rainbow!
context.beginPath();
context.moveTo(150,50);
context.lineTo(90,150);
context.lineTo(210,150);
context.lineTo(150,50);
context.closePath();
var rainbow = context.createLinearGradient(150,50,150,150);
rainbow.addColorStop(.1,"red");
rainbow.addColorStop(.3,"orange");
rainbow.addColorStop(.5,"yellow");
rainbow.addColorStop(.7,"lime");
rainbow.addColorStop(.9,"blue");
context.fillStyle = rainbow;
context.fill();
// Some text! And a shadow!
context.shadowOffsetX = -2;
context.shadowOffsetY = 2;
context.shadowColor = "#f88";
context.shadowBlur = .01;
context.fillStyle = "red";
context.font = "bold 72px monospace";
context.fillText("Foo Bar",30,400);
context.fillStyle = "blue";
context.fillRect(0,300,30,30);
// ???????????? end of main. The current context now seems to remain (blue fillstyle with some shadow )
// routine here : press any key to animate two new blocks over writing ----------------
document.onkeydown = function(e) {
context.fillstyle = "red"; // <-- ???????? this doesnt work (remains same colour as last one in main )
context.fillRect(x,y,50,50); // <-- ???????? draws a square in blue, not red
x = x - 5;
context.fillstyle = "white"; // <-- ???????? this doesnt work (remains same colour as last one in main )
context.fillRect(x -100,y ,50,50); // <-- ???????? draws a square in blue, not white
}

Because you wrote fillstyle and not fillStyle. You need to capitalize the S.
It is valid in Javascript because you are just attaching a new fillstyle field (which does not exist and is meaningless) to that context.
So you gotta be careful. Typos can cause lots of trouble, because the resulting code isn't technically an error, but its certainly not what you want!

Categories

Resources