Develop Reference

How to style closePath() in canvas?

I am trying to style the closePath() on my canvas but am at a loss on how to do that, as a matter of fact I would actually like all the lines to have a different style, for this question lets stick to getting different colors. ! As you can see I have a triangle, how can I have differing strokestyles for each line? Here is link to the Code Pen
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.moveTo(20, 140);
ctx.lineTo(120, 10);
ctx.strokeStyle = "green";
ctx.lineTo(220, 140);
ctx.closePath();
ctx.strokeStyle = "blue";
ctx.stroke();
<canvas id="canvas"></canvas>

You would need to have the three lines as three separate paths.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20, 140);
ctx.lineTo(120, 10);
ctx.strokeStyle = "red";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(120, 10);
ctx.lineTo(220, 140);
ctx.strokeStyle = "green";
ctx.stroke();
ctx.beginPath();
ctx.moveTo(220, 140);
ctx.lineTo(20, 140);
ctx.strokeStyle = "blue";
ctx.stroke();
<canvas id="canvas"></canvas>

Each segment needs to be coloured.
function qsa(sel,par=document){return par.querySelectorAll(sel)}
window.addEventListener('load', onLoaded, false);
function onLoaded(evt)
{
draw();
}
class vec2d
{
constructor(x=0,y=0)
{
this.x = x;
this.y = y;
}
}
function draw()
{
var verts = [ new vec2d(20,140), new vec2d(120, 10), new vec2d(220,140) ];
var colours = ['red', 'green', 'blue'];
let can = qsa('canvas')[0];
let ctx = can.getContext('2d');
var numLineSegs = verts.length;
for (var lineSegIndex=0; lineSegIndex<numLineSegs; lineSegIndex++)
{
var index1 = lineSegIndex;
var index2 = (lineSegIndex+1)%verts.length;
ctx.beginPath();
ctx.strokeStyle = colours[index1];
ctx.moveTo(verts[index1].x, verts[index1].y);
ctx.lineTo(verts[index2].x, verts[index2].y);
ctx.stroke();
}
ctx.closePath();
}
<canvas width=512 height=512></canvas>

Remove context Arc from canvas

I am working on a project where user upload structural diagram(engineering diagram). When I user double click on the intended location on canvas the speech to text engine turns on and listen for user comments and then it draw a small circle with different colors and fill text (count) on that location. I am saving comments, counts, coordinates of arc and other things in react state and displaying the list in a component with edit and delete button. When user press the delete button. comment and other property gets deleted from the state.
I want to remove the drawn arc from the canvas. How can I do it?
I have tried clearRect. But it is not working in this case.
Please let me know.
componentDidMount() {
const img = this.refs.image;
const canvas = this.refs.canvas;
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
img.onload = () => {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
ctx.font = "40px Courier";
ctx.fillText('Drawing 1', 200, 100);
}
}
drawCircle(x, y, getcolor) {
const canvas = this.refs.canvas;
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(x, y, 8, 0, Math.PI * 2, false);
ctx.strokeStyle = "black";
ctx.stroke();
ctx.fillStyle = getcolor;
ctx.fill();
ctx.closePath();
// Text
ctx.beginPath();
ctx.font = "20px Arial"
ctx.fillStyle = "#00538a";
ctx.textAlign = "center";
ctx.fillText(this.state.count, x , y - 20);
ctx.fill();
ctx.closePath();
}
remove(id) {
this.setState({
comments: this.state.comments.filter(c => c.id !== id)
});
const canvas = this.refs.canvas;
const ctx = canvas.getContext('2d');
const arc = this.state.comments.filter(c => c.id === id);
let x = arc[0].coordinates.x;
let y = arc[0].coordinates.y
console.log("TCL: Drawing -> remove -> arc", arc[0].coordinates);
ctx.beginPath();
ctx.arc(x, y, 8, 0, Math.PI * 2, false);
ctx.clip();
ctx.clearRect(x-8, y-8, 16,16);
}
Thanks
Meet

As I mentioned in my comments the way you're trying to remove a circle from the canvas ain't gonna work.
If you call clearRect() on the canvas, it will essentially overwrite the target area including your original background image.
Instead you need to keep track of the circles - more precisely the position at which those should be drawn - using an array.
If you click the canvas -> add a circle element to an array -> clear the canvas -> draw the diagram again -> loop over the array to draw the circles on top
If you click the remove button of a circle -> search the array for this particular circle -> remove it from the array -> clear the canvas -> draw the diagram again -> loop over the array to draw the circles on top
Here's an example to illustrate what I'm talking about:
var comments = new Array();
var canvas = document.createElement("canvas");
canvas.style="float:left;"
canvas.width = 400;
canvas.height = 200;
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
function updateCanvas() {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
ctx.font = "40px Courier";
ctx.fillText('Drawing 1', 200, 100);
for (var a = 0; a < comments.length; a++) {
ctx.beginPath();
ctx.arc(comments[a].x, comments[a].y, 8, 0, Math.PI * 2, false);
ctx.strokeStyle = "black";
ctx.stroke();
ctx.fillStyle = "black";
ctx.fill();
ctx.closePath();
}
}
var img = new Image();
img.onload = () => {
updateCanvas();
}
img.src = "https://picsum.photos/id/59/400/200";
function addCircle(e) {
var div = document.createElement("div");
div.innerHTML = "remove" + comments.length;
document.body.appendChild(div);
div.addEventListener("click", function(e) {
for (var a = 0; a < comments.length; a++) {
if (comments[a].div == e.target) {
comments.splice(a, 1);
break;
}
}
document.body.removeChild(e.target);
updateCanvas();
});
comments.push({
x: e.clientX,
y: e.clientY,
div: div
});
updateCanvas();
}
canvas.addEventListener("click", addCircle);
Everytime you click on the picture a 'remove' div will be created to the right of the canvas. if you click it, the associated circle will be removed.

How do I clear ONLY rectangle borders? (JS , Canvas)

I'm trying to clear only the strokeRect() and keep content in that rectangle.
In this example, how do I clear green rectangle without affecting the red one?
var cut = [50, 70, 100, 100]
var cut1 = [60, 85, 60, 60]
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(cut[0], cut[1], cut[2], cut[3]);
ctx.lineWidth = 3;
ctx.strokeStyle = 'green';
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.rect(cut1[0], cut1[1], cut1[2], cut1[3]);
ctx.lineWidth = 3;
ctx.strokeStyle = 'red';
ctx.stroke();
ctx.closePath();
<canvas id="canvas" width=400px height=200px></canvas>
Can't figure out how..
Thanks in advance!

You need to clear the canvas and draw the red rectangle again.
var c = document.getElementById("canvas");
c.width=400;
c.height=200;
var ctx = c.getContext("2d");
var cut = [50, 70, 100, 100]
var cut1 = [60, 85, 60, 60]
function drawRectangle(cut,fill){
ctx.beginPath();
ctx.rect(cut[0], cut[1], cut[2], cut[3]);
ctx.lineWidth = 3;
ctx.strokeStyle = fill;
ctx.stroke();
ctx.closePath();
}
drawRectangle(cut,"green");
drawRectangle(cut1,"red");
clear.addEventListener("click",()=>{
ctx.clearRect(0,0, c.width, c.height);
drawRectangle(cut1,"red");
});
canvas{display:block;}
<button id="clear">clear</button>
<canvas id="canvas" width=400px height=200px></canvas>

In your case, clear & redraw is what you really need, but just for completeness, to clear in any shape, you can use compositing operations.
By setting the compositing mode to destination-out, all the pixels that should normally have been filled by your drawings will actually get rendered as transparent.
So to make a simple clear-stroke-rect:
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(20, 20, 80, 80);
// clear
ctx.globalCompositeOperation = 'destination-out';
ctx.lineWidth = 5;
ctx.strokeRect(40,40,30,30);
// set back to 'normal'
ctx.globalCompositeOperation = 'source-over';
<canvas id="canvas"></canvas>
But using compositing, you can really clear in any shape, even from bitmap with transparency:
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
ctx.fillStyle = 'red';
ctx.fillRect(20, 20, 80, 80);
// clear
ctx.globalCompositeOperation = 'destination-out';
ctx.drawImage(img, 40,40);
// set back to 'normal'
ctx.globalCompositeOperation = 'source-over';
};
img.src = 'https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png';
<canvas id="canvas"></canvas>

Change text in canvas object using Javascript

In below example, lets say json.mes is the received message from Ajax; A button is designed which must display the message in a canvas box. I have tried to read the message using getElementById (as below); however, it does not work. Any solution?
<div> <button id="submit" type="button" class="btn btn-success" style="float: right;">Populate</button></div>
<script>
var canvas = document.getElementById("myCanvas3");
var ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, 150, 150);
ctx.fillStyle = "#dbbd7a";
ctx.font = "10px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillStyle = "#ff0000";
ctx.fillText(document.getElementById("picoutput0"), 74, 74);
</script>
<script>
...
$("#submit").click(function(e) {
...
var text0=json.mes
$('#picoutput0').html(text0);
</script>

try this code
var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d');
ctx.fillStyle = '#0e70d1';
ctx.fillRect(0, 0, canvas.width, canvas.height);
var stringTitle = document.getElementById('title').textContent;
console.log(stringTitle);
ctx.fillStyle = '#fff';
ctx.font = '60px sans-serif';
ctx.fillText(stringTitle, 15, canvas.height / 2 + 35);
DEMO

Javascript no shapes appear

I'm trying to just make a rectangle but nothing will appear, just the background. I've tried ctx.fill, ctx.fillStyle etc. nothing works:
I'm refering to this part
fill(77, 66, 66);
rect(10,200,100,100);
Here is the whole code for the page
var ctx, W, H;
window.onload = function() {
var canvas = document.getElementById("canvas");
W = window.innerWidth;
H = window.innerHeight;
canvas.width = W;
canvas.height = H;
ctx = canvas.getContext("2d");
setInterval(draw, 1);
function draw() {
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "#E6E6FF"; // this part does appear
ctx.fillRect(0, 0, W, H);
fill(77, 66, 66); // this doesn't appear
rect(10,200,100,100);
}
}
Thanks

You need to call fill and rect on the canvas context.
Also you need to change the fillStyle otherwise you're drawing a rectangle with the same color as the background and it won't show.
var ctx, W, H;
window.onload = function() {
var canvas = document.getElementById("canvas");
W = window.innerWidth;
H = window.innerHeight;
canvas.width = W;
canvas.height = H;
ctx = canvas.getContext("2d");
setTimeout(draw, 1);
function draw() {
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "#E6E6FF";
ctx.fillRect(0, 0, W, H);
ctx.fillStyle = "red"; // need this otherwise the rect will be the same color as the background
ctx.rect(10, 200, 100, 100); // needs to be called on the canvas context
ctx.fill(); // needs to be called on the canvas context, it will fill any path not already filled in.
}
}

You are filling both areas with the same color, and you have to use the context to perform fill functions. you also need to create the rect BEFORE you fill it.
Try this on for size: https://jsfiddle.net/szbk6f67/3/
var ctx, W, H;
window.onload = function () {
var canvas = document.getElementById("canvas");
W = 400;
H = 400;
canvas.width = W;
canvas.height = H;
ctx = canvas.getContext("2d");
setInterval(draw, 1);
function draw() {
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'gray';
ctx.fillRect(0, 0, W, H);
ctx.fillStyle = 'black';
ctx.rect(10, 200, 100, 100);
ctx.fill();
}
}