Adding text in nested circles using canvas? - javascript

I want to draw a circle inside another circle and then add text inside the new (small) circle (for example an alphabet).
I got the following so for far, any advice?
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
ctx.fillStyle ="red";
ctx.fill();
var dd = document.getElementById("myCanvas");
var ddtx = dd.getContext("2d");
ddtx.beginPath();
ddtx.arc (96,50,35,2*Math.PI,1.99*Math.PI);
ddtx.stroke();
ddtx.fillStyle ="blue";
ddtx.fill();
var d = document.getElementById("myCanvas");
var dtx = d.getContext("2d");
dtx.beginPath();
dtx.arc(95,50,10,2*Math.PI,1.9*Math.PI);
dtx.stroke();
dtx.fillStyle = "white";
dtx.fill();
</script>
</body>
</html>

You can use the context text functions as follows :
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
ctx.fillStyle ="red";
ctx.fill();
var d = document.getElementById("myCanvas");
var dtx = d.getContext("2d");
dtx.beginPath();
dtx.arc(95,50,10,2*Math.PI,1.9*Math.PI);
dtx.stroke();
dtx.fillStyle = "white";
dtx.fill();
dtx.fillStyle = "black"; // font color to write the text with
var font = "bold 13px serif";
dtx.font = font; // specify the font
dtx.textBaseline = "top"; // set the baseline as top
dtx.fillText("A", 90 ,43); // render the text with its x and y coordinates
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
</body>
</html>

Related

HTML5 Canvas stroke text overlap joinning part in Arabic, Hindi, Bengali etc language

In Arabic, Hindi, Bengali etc language, each letter joining each other while writing. But in HTML5 Canvas textStroke, these strokes are not joining. Is there any way to join these overlapping joining point?
Picture: Problem with an overlap of joining parts
Picture: These joining parts should be joined
var arabic = document.getElementById("arabic");
var ctx = arabic.getContext("2d");
ctx.font = "100px Georgia";
ctx.lineWidth = 3;
ctx.strokeText(" اَلْعَرَبِيَّةُ ", 10, 100);
var hindi = document.getElementById("hindi");
var ctx = hindi.getContext("2d");
ctx.font = "100px Georgia";
ctx.lineWidth = 3;
ctx.strokeText("हिन्दी", 10, 100);
var bengali = document.getElementById("bengali");
var ctx = bengali.getContext("2d");
ctx.font = "100px Georgia";
ctx.lineWidth = 3;
ctx.strokeText("বেঙ্গলি", 10, 100);
JSFiddle example: https://jsfiddle.net/qa9t64bd/
Custom Shadow Filter is no need to solve this problem. Just add ctx.globalCompositeOperation = "destination-out"; and then add fillText. It will automaticly clip the text stroke and fillText.
var arabic = document.getElementById("arabic");
var ctx = arabic.getContext("2d");
ctx.font = "100px Georgia";
ctx.lineWidth = 8;
ctx.strokeText(" اَلْعَرَبِيَّةُ ", 10, 100);
ctx.globalCompositeOperation = "destination-out";
ctx.fillText(" اَلْعَرَبِيَّةُ ", 10, 100);
var hindi = document.getElementById("hindi");
var ctx = hindi.getContext("2d");
ctx.font = "100px Georgia";
ctx.lineWidth = 8;
ctx.strokeText("हिन्दी", 10, 100);
ctx.globalCompositeOperation = "destination-out";
ctx.fillText("हिन्दी", 10, 100);
var bengali = document.getElementById("bengali");
var ctx = bengali.getContext("2d");
ctx.font = "100px Georgia";
ctx.lineWidth = 8;
ctx.strokeText("বেঙ্গলি", 10, 100);
ctx.globalCompositeOperation = "destination-out";
ctx.fillText("বেঙ্গলি", 10, 100);
canvas {
background: #FFFF00;
}
<canvas id="arabic" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="hindi" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="bengali" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
JSFiddle Link - https://jsfiddle.net/1nc5owp7/1/

Dynamically created canvas not recognized/manipulatable

I am trying to create and fill a canvas as blue without using any html. I have been successful in rendering an empty canvas. The issue occurs when I try to fill the canvas with a color as seen below in the second code snippet. In the two snippets below, the only difference is which canvas is filled with blue (document.getElementsByClassName("blueCanvas")[0] in the first one, which works, and document.getElementsByClassName("blueCanvas")[2], which should fill the dynamically created canvas, and fails.
some things I have tried/noticed:
First I thought it was an issue with the order in the execution in the creation of the canvas and the js that tries to fill it, but the problem persists even when I create the canvas in the beginning of the <body>. I also thought it might be an issue of append the element to the DOM but it renders an empty canvas so I don't see how that's possible.
Thanks.
var newCanvas = document.createElement('canvas');
newCanvas.width = '300';
newCanvas.height = '150'
newCanvas.className = 'blueCanvas';
newCanvas.style = 'border:1px solid black'
newCanvas.innerHTML = '<canvas> </canvas>';
document.body.appendChild(newCanvas);
var canvas = document.getElementsByClassName("blueCanvas")[0];
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
<canvas id="canvas" class='blueCanvas' width="300" height="150" style="border:1px solid black"></canvas>
<canvas id="canvas" class='blueCanvas' width="300" height="150" style="border:1px solid black"></canvas>
var newCanvas = document.createElement('canvas');
newCanvas.width = '300';
newCanvas.height = '150'
newCanvas.className='blueCanvas';
newCanvas.style= 'border:1px solid black'
newCanvas.innerHTML = '<canvas> </canvas>';
document.body.appendChild(newCanvas);
var canvas = document.getElementsByClassName("blueCanvas")[2];
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
<canvas id="canvas" class='blueCanvas' width="300" height="150" style="border:1px solid black"></canvas>
<canvas id="canvas" class='blueCanvas' width="300" height="150" style="border:1px solid black"></canvas>
Since I know you read my comments:
function blueCanvas(){
let canvas = document.createElement('canvas'), style = canvas.style, ctx;
canvas.width = 300; canvas.height = 150; canvas.className = 'blueCanvas';
style.border = '1px solid black'; ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue'; ctx.fillRect(0, 0, 300, 150);
document.body.appendChild(canvas);
}
blueCanvas();
Its not clear what you want.
Maybe this will help
const canvas = document.createElement('canvas');
canvas.width = 400; // size it
canvas.height = 300;
canvas.className = 'blueCanvas'; // assign class name
document.body.appendChild(canvas); // add to document
// get context
const ctx = canvas.getContext("2d");
// fill it with blue
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "black";
ctx.font = "32px Arial";
ctx.textAlign = "center";
ctx.fillText("Dynamically added canvas", 200, 100);

Unable to apply different fill style to two canvas rectangle

Why am I not able to add two different styles to two Rectangles ctx and ctx2 in the following code?
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = 'red';
ctx.rect(20, 20, 150, 100);
ctx.fill();
var ctx2 = c.getContext("2d");
ctx2.fillStyle = 'green';
ctx2.rect(60, 120, 150, 100);
ctx2.fill();
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

How do I have different colours of text in an HTML canvas

So I'm trying to make this canvas have different types of text on it including colours. Here what I have so far.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="200" style=" border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
context.drawImage(imageObj, 0, 0);
context.font = "40pt Calibri";
context.fillText("My TEXT!", 50, 100);
};
imageObj.src = "Assets/Background2.png";
};
</script>
</body>
</html>
You just need to use the fillStyle method each time you want to change your font color:
context.fillStyle = 'red';
Use fillStyle before fillText
Check this Fiddle

JavaScript, what is wrong with this?

This is my JS code, I would realy appreciate if someone would help me, because this code is not even running and I don't know why.
<canvas id="Canvas1" width="400" height="100"></canvas>
<script>
var can = document.getElementById('Canvas1');
var ctx = can.getContext('2d');
ctx.fillStyle = "black";
ctx.fillRect(100, 100, 250, 100);
</script>
<canvas id="Canvas1" width="400" height="100" style="border:1px solid #000000;"></canvas>
<script>
var can = document.getElementById('Canvas1');
var ctx = can.getContext('2d');
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, 150, 50);
</script>
You missed border in canvas so u was not seeing o/p
and also you starting fillRect at 100(height) that is your end point of rect so u are not able to see the result.
Remember
ctx.fillRect(p1, p2 ,p3 , p4);
p1 = Start point X
p2 = Start point Y
p3 = width of your rectangle that should be less than or equal to Canvas width.
p4 = Height of your rectangle that should be less than or equal to Canvas height.

Categories