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") + '"/>');

Creating a line animation on canvas

I'm a newbie in canvas drawing. I want to draw the PV string model and the direction of flow of electrons into <canvas> tag.
This is what I want to achieve, redrawing the lines from the following direction:
How do I initially set the animation location, and do I need to update it via setTimeout?
Here is what I try so far:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// drawing code here
/* First Row */
ctx.fillStyle = "rgb(2,150,224, 1)";
ctx.fillRect(50, 50, 50, 50);
ctx.fillStyle = "rgb(2,150,224, 1)";
ctx.fillRect(110, 50, 50, 50);
ctx.fillStyle = "rgb(188,12,50, 1)";
ctx.fillRect(170, 50, 50, 50);
ctx.fillStyle = "rgb(2,150,224, 1)";
ctx.fillRect(230, 50, 50, 50);
ctx.fillStyle = "rgb(2,150,224, 1)";
ctx.fillRect(290, 50, 50, 50);
/* Second Row */
ctx.fillStyle = "rgb(0,106,160, 1)";
ctx.fillRect(50, 150, 50, 50);
ctx.fillStyle = "rgb(0,106,160, 1)";
ctx.fillRect(110, 150, 50, 50);
ctx.fillStyle = "rgb(0,106,160, 1)";
ctx.fillRect(170, 150, 50, 50);
ctx.fillStyle = "rgb(0,106,160, 1)";
ctx.fillRect(230, 150, 50, 50);
ctx.fillStyle = "rgb(0,106,160, 1)";
ctx.fillRect(290, 150, 50, 50);
/* Paths */
ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "rgb(34,177,76, 1)";
ctx.moveTo(0, 75);
ctx.lineTo(400, 75);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "rgb(34,177,76, 1)";
ctx.moveTo(400, 75);
ctx.lineTo(400, 175);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = "3";
ctx.strokeStyle = "rgb(34,177,76, 1)";
ctx.moveTo(0, 175);
ctx.lineTo(400, 175);
ctx.stroke();
} else {
// canvas-unsupported code here
}
/* canvas {
border: 1px solid #d3d3d3;
} */
<canvas id="myCanvas" width="400" height="400">
Your browser does not support the HTML5 canvas tag.</canvas>
Any help would be appreciated!

There are many ways to animate this; here's my approach (excerpt; see
JSFiddle for full code):
var lerp = (a, b, t) => a + t * (b - a);
var speed = 0.01;
var time = 0;
var visited = [];
var points = [
{
from: { x: 0, y: 75 },
to: { x: 395, y: 75 }
},
{
from: { x: 395, y: 75 },
to: { x: 395, y: 175 }
},
{
from: { x: 395, y: 175 },
to: { x: 0, y: 175 }
}
];
/* Paths */
ctx.lineWidth = 3;
ctx.strokeStyle = "rgb(34, 177, 76, 1)";
(function update() {
if (points.length) {
visited.push({
x: lerp(points[0].from.x, points[0].to.x, time),
y: lerp(points[0].from.y, points[0].to.y, time)
});
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBoxes(ctx);
ctx.beginPath();
ctx.moveTo(visited[0].x, visited[0].y)
visited.forEach(e => ctx.lineTo(e.x, e.y));
ctx.stroke();
time += speed;
if (time >= 1) {
time = 0;
points.shift();
}
requestAnimationFrame(update);
}
})();
The idea is to keep a data structure of all the turning points, then lerp along the path, drawing a line along the way. Use an easing function instead of lerp if you prefer a more "modern"-looking animation; easing is usually easier to implement and may result in removal of some code (for example, no need to keep track of starting points and time).
Last minor note--your original code was cutting off the line at the right edge of the canvas, so I took the liberty of using 395 instead of 400 for the drawing width.

Canvas Text and image blurry

I don´t know why the text in canvas is blurry and the image drawed is also blurry, this is my example how I create the canvas with the image and text.
https://jsfiddle.net/jorge182/5ju5pLqb/2/
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.save();
context.beginPath();
context.arc(25, 25, 25, 0, Math.PI * 2, true);
context.closePath();
context.clip();
context.drawImage(imageObj, 0, 0, 50, 50);
context.beginPath();
context.arc(0, 0, 25, 0, Math.PI * 2, true);
context.clip();
context.closePath();
context.restore();
context.lineWidth = 2;
context.textAlign = 'left';
context.font = '8pt Signika Negative';
context.fillStyle = 'black';
context.fillText('Jorge', 60, 15);
context.fillText(' have been here!', 60, 30);
context.font = '6pt Signika Negative';
context.textAling = 'left';
context.fillStyle = '#555';
context.fillText('Caribe Photo Weading Photograpy', 60, 40);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'

The blurry image is probably because you resized the image too much from its original size. Take a look at the jsFiddle below and you can see if you only resize half of its size it's still looking good.
https://jsfiddle.net/gracegotlost/5ju5pLqb/3/
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
imageObj.onload = function() {
var width = imageObj.width;
var height = imageObj.height;
context.save();
context.beginPath();
context.arc(width/2, height/2, 150, 0, Math.PI * 2, true);
context.fill();
context.closePath();
context.clip();
context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);
context.beginPath();
context.arc(0, 0, 25, 0, Math.PI * 2, true);
context.clip();
context.closePath();
context.restore();
context.textAlign = 'left';
context.font = '32pt Signika Negative';
context.fillStyle = 'black';
context.fillText('Jorge', 60, 350);
context.fillText(' have been here!', 150, 350);
context.font = '20pt Signika Negative';
context.textAling = 'left';
context.fillStyle = '#555';
context.fillText('Caribe Photo Weading Photograpy', 60, 400);
};
For the blurry text I found one post very helpful. If you can increase the text size it will look better, but to give it even more higher resolution you would probably do as follows:
https://stackoverflow.com/a/15666143/4809052
For the jagged edge the first answer is very helpful.

making 2048 game: referencing object names

Here I had a problem with my 2048 game that I am making in HTML and Javascript and I am having trouble again. This time, I am trying to make a for/in loop that can check to see if the squares to the left, right, top and bottom are filled. What I need is a way to refer to the numbers of the squares while still being able to refer to the properties of the objects. I am doing my best to explain what I am trying to do. I hope the comments in my code explain what each block does. Thank you for your help.
/*
Math.floor(Math.random()*(1-16+1)+1) <------
|
this code picks a random number between 1 and 16___|
switch ()
*/
//this function creates a method to create objects
function square(full, color, number) {
this.full = full;
this.color = color;
this.number = number;
}
//this block creates objects for each square
var sq1 = new square(true, "black", 2);
var sq2 = new square(false, "grey", 2);
var sq3 = new square(false, "grey", 2);
var sq4 = new square(false, "grey", 2);
var sq5 = new square(false, "grey", 2);
var sq6 = new square(false, "grey", 2);
var sq7 = new square(false, "grey", 2);
var sq8 = new square(false, "grey", 2);
var sq9 = new square(false, "grey", 2);
var sq10 = new square(false, "grey", 2);
var sq11 = new square(false, "grey", 2);
var sq12 = new square(false, "grey", 2);
var sq13 = new square(false, "grey", 2);
var sq14 = new square(false, "grey", 2);
var sq15 = new square(false, "grey", 2);
var sq16 = new square(false, "grey", 2);
//creates a board with the .full properties of the squares
board = [sq1.full, sq2.full, sq3.full, sq4.full, sq5.full, sq6.full, sq7.full, sq8.full, sq9.full, sq10.full, sq11.full, sq12.full, sq13.full, sq14.full, sq15.full, sq16.full];
//creates var sq_num to help check if items to left, up, right and down are full
var sq_num =
//this giant code block conducts all movement
function movement() {
document.addEventListener('keydown', function(event) {
/*for (sq_num in board)
{
if sq_num */
if (event.keyCode == 37) //left
{
if (sq4.full == true) {
sq4.color = sq1.color
sq4.color = "grey"
sq1.color = true
}
if (sq8.full == true) {
sq8.color = sq7.color
sq7.color = "black"
}
if (sq12.full == true) {
sq12.color = sq11.color
sq11.color = "black"
}
if (sq16.full == true) {
sq16.color = sq15.color
sq15.color = "black"
}
} else if (event.keyCode == 38) //up
{
sq13.color = sq9.color
sq9.color = "black"
sq14.color = sq10.color
sq10.color = "black"
sq15.color = sq11.color
sq11.color = "black"
sq16.color = sq12.color
sq12.color = "black"
} else if (event.keyCode == 39) //right
{
if (sq1.full == true) {
sq1.color = sq2.color
sq2.color = "black"
sp2.full = true
}
if (sq2.full == true) {
sq2.color = sq3.color
sq3.color = "black"
sq3.full = true
}
if (sq5.full == true) {
sq5.color = sq6.color
sq6.color = "black"
}
if (sq9.full == true) {
sq9.color = sq10.color
sq10.color = "black"
}
if (sq13.full = true) {
sq13.color = sq14.color
sq14.color = "black"
}
} else if (event.keyCode == 40) //down
{
sq1.color = sq5.color
sq5.color = "black"
sq2.color = sq6.color
sq6.color = "black"
sq3.color = sq7.color
sq7.color = "black"
sq4.color = sq8.color
sq8.color = "black"
}
})
};
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//this function draws each square where it should be in the formation of a board.
function draw() {
ctx.clearRect(0, 0, c.width, c.height); // clear the canvas so the old rectangles are gone
// board
ctx.beginPath();
ctx.lineWidth = "2";
ctx.strokeStyle = "grey";
ctx.rect(5, 5, 610, 610);
ctx.stroke();
// sq1
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(10, 10, 150, 150);
ctx.stroke();
ctx.fillStyle = sq1.color;
ctx.fill();
//sq2
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(160, 10, 150, 150);
ctx.stroke();
ctx.fillStyle = sq2.color;
ctx.fill();
//sq3
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(310, 10, 150, 150);
ctx.stroke();
ctx.fillStyle = sq3.color;
ctx.fill();
//sq4
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(460, 10, 150, 150);
ctx.stroke();
ctx.fillStyle = sq4.color;
ctx.fill();
//sq5
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(10, 160, 150, 150);
ctx.stroke();
ctx.fillStyle = sq5.color;
ctx.fill();
//sq6
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(160, 160, 150, 150);
ctx.stroke();
ctx.fillStyle = sq6.color;
ctx.fill();
//sq7
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(310, 160, 150, 150);
ctx.stroke();
ctx.fillStyle = sq7.color;
ctx.fill();
//sq8
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(460, 160, 150, 150);
ctx.stroke();
ctx.fillStyle = sq8.color;
ctx.fill();
//sq9
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(10, 310, 150, 150);
ctx.stroke();
ctx.fillStyle = sq9.color;
ctx.fill();
//sq10
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(160, 310, 150, 150);
ctx.stroke();
ctx.fillStyle = sq10.color;
ctx.fill();
//sq11
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(310, 310, 150, 150);
ctx.stroke();
ctx.fillStyle = sq11.color;
ctx.fill();
//sq12
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(460, 310, 150, 150);
ctx.stroke();
ctx.fillStyle = sq12.color;
ctx.fill();
//sq13
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(10, 460, 150, 150);
ctx.stroke();
ctx.fillStyle = sq13.color;
ctx.fill();
//sq14
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(160, 460, 150, 150);
ctx.stroke();
ctx.fillStyle = sq14.color;
ctx.fill();
//sq15
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(310, 460, 150, 150);
ctx.stroke();
ctx.fillStyle = sq15.color;
ctx.fill();
//sq16
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "black";
ctx.rect(460, 460, 150, 150);
ctx.stroke();
ctx.fillStyle = sq16.color;
ctx.fill();
}
window.setInterval(draw, 100) // repeat game loop function forever, 10 times per second(that value is measured in ms)
body {
background-color: lightgrey;
}
<canvas id="myCanvas" width="620" height="620" style="border:1px solid #d3d3d"></canvas>

How to clear the fillText that is setInterval?

This is a simple code to animate a line of text in a canvas but when I use clearRect it still remains on the canvas and doesn't get erased.
Here is the WebApp:
<title>Error Clearing FillText</title>
<script type="text/javascript">
var c, ctx, episode;
var map01 = "Overgrown...", map02 = "Flood Zone...";
function load() {
c = document.getElementById("canvas");
ctx = c.getContext("2d");
episode = document.getElementById("episode");
ctx.clearRect(0, 0, 400, 240);
ctx.drawImage(episode, 10, 5);
ctx.font = "20px san-serif";
ctx.fillStyle = "white";
}
var nameCharCount1 = 0, nameCharCount2 = 0;
function funcMap01() {
ctx.clearRect(0, 0, 400, 240);
ctx.drawImage(episode, 10, 5);
setInterval('loadMap01()', 70);
}
function funcMap02() {
ctx.clearRect(0, 0, 400, 240);
ctx.drawImage(episode, 10, 5);
setInterval('loadMap02()', 70);
}
function loadMap01() {
nameCharCount1++;
var text = map01.substring(0, nameCharCount1);
ctx.setFillStyle = "0";
ctx.fillText(text, 16, 25);
}
function loadMap02() {
nameCharCount2++;
var text = map02.substring(0, nameCharCount2);
ctx.setFillStyle = "0";
ctx.fillText(text, 16, 25);
}
addEventListener("load", load, false);
</script>
</head>
<body>
<canvas id="canvas" width="400" height="240" style="border: 1px solid #000000;">
</canvas>
<br>
<button onclick="funcMap01();">Overgrown...</button>
<button onclick="funcMap02();">Flood Zone...</button>
<h1>I hate arrays..</h1>
</body>
<img id="episode" src="http://i717.photobucket.com/albums/ww176/T3ZTAM3NT/Episode_zps4fa66a1b.png" style="display: none;">
JSFIDDLE.
Do you have any tips/ideas on how should I go about clearing the text?

I made a fiddle for it so check this out:
Working Fiddle
And below is the edited code. All I did is cleared the first functions interval in the second functions call and viceversa.
Script
var c, ctx, episode;
var map01 = "Overgrown...", map02 = "Flood Zone...";
var interval1,interval2;
function load() {
c = document.getElementById("canvas");
ctx = c.getContext("2d");
episode = document.getElementById("episode");
ctx.clearRect(0, 0, 400, 240);
ctx.drawImage(episode, 10, 5);
ctx.font = "20px san-serif";
ctx.fillStyle = "white";
}
var nameCharCount1 = 0, nameCharCount2 = 0;
function funcMap01() {
clearInterval(interval2);
ctx.clearRect(0, 0, 400, 240);
ctx.drawImage(episode, 10, 5);
interval1=setInterval('loadMap01()', 70);
}
function funcMap02() {
clearInterval(interval1);
ctx.clearRect(0, 0, 400, 240);
ctx.drawImage(episode, 10, 5);
interval2=setInterval('loadMap02()', 70);
}
function loadMap01() {
nameCharCount1++;
var text = map01.substring(0, nameCharCount1);
ctx.setFillStyle = "0";
ctx.fillText(text, 16, 25);
}
function loadMap02() {
nameCharCount2++;
var text = map02.substring(0, nameCharCount2);
ctx.setFillStyle = "0";
ctx.fillText(text, 16, 25);
}
addEventListener("load", load, false);