We Keep Coding

Change canvas width and height without losing the current draw

I'm creating a pixel art app and when I want to save the image from the canvas the image is so small, so it seems pixelated when I want to resize it.
I want to resize it to bigger dimensions, but I don't know how.
This is the code example:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(0, 0, 50, 50);
ctx.fillStyle = 'red';
ctx.fill();
document.write('<img style="width:300px;" src="'+c.toDataURL("image/png")+'"/>');
// This is an image with dimensions 108x108px and it seems very bad when i resize it to 300x300px
// I want to download the canvas image with more resolution
<canvas id="myCanvas" width="108" height="108" style="width: 300px; height:300px;">
</canvas>

you can create a canvas and put the imageData in it.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(0, 0, 25, 25);
ctx.fillStyle = 'red';
ctx.fill();
ctx.beginPath();
ctx.rect(0, 25, 25, 25);
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.beginPath();
ctx.rect(25, 0, 25, 25);
ctx.fillStyle = 'blue';
ctx.fill();
ctx.beginPath();
ctx.rect(25, 25, 25, 25);
ctx.fillStyle = 'green';
ctx.fill();
var c2 = document.createElement("canvas");
c2.width = 50;
c2.height = 50;
var ctx2 = c2.getContext("2d");
var imageData = ctx.getImageData(0, 0, 50, 50);
ctx2.putImageData(imageData, 0, 0);
document.write('<img style="width:300px;" src="' + c2.toDataURL("image/png") + '"/>');

fillText over gradient background does not show

When I change from strokeText to fillText the text disappears. I just have a gradient canvas background and I am trying to put fillText over the gradient. strokeText works fine but when I change to fillText, the text is gone.
'''
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var grd = ctx.createRadialGradient(100, 100, 100, 100, 130, 50);
grd.addColorStop(0, "orange");
grd.addColorStop(1, "yellow");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 200, 100);
ctx.font="20px Georgia";
ctx.strokeText("hello",10,30);
'''
HTML
<canvas id="canvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

It “disappears” because you only set fillStyle once therefore both fillRect and fillText are the same gradient color. The text is there but it’s blended into the background. Change the fillStyle again before the text.
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var grd = ctx.createRadialGradient(100, 100, 100, 100, 130, 50);
grd.addColorStop(0, "orange");
grd.addColorStop(1, "yellow");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 200, 100);
ctx.fillStyle = "blue";
ctx.font="20px Georgia";
ctx.fillText("hello",10,30);
The reason it doesn’t do that with stroke is because stroke doesn’t get it’s orders from fillStyle so therefore it uses the default which is black.

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);

Adding text in nested circles using canvas?

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>