Develop Reference

How to convert an Arc into a Line with HTML5 Canvas?

I would like to animate a circle into a line with the radius equaling the width, and I am wondering how I can do this with an Arc? Or perhaps there is a better way?
From
To
Here's my arc:
function drawStar(x,y,size,scale,opacity,ctx){
ctx.save();
ctx.beginPath();
ctx.arc(x,y,size+scale,0,size+scale * Math.PI,false);
ctx.globalAlpha = opacity
ctx.closePath();
setFillStyle('rgb(255,237,219)',ctx);
ctx.fill()
ctx.restore();
}
I tried using ctx.scale(n,1), however it does not keep the same radius(width) and it scales the collection of arcs as a whole (zoom in effect).

Use instead a wide line-width value with "round" lineCap and stroke():
var ctx = c.getContext("2d");
ctx.lineWidth = 50;
ctx.lineCap = "round";
ctx.moveTo(45 , 25);
ctx.lineTo(45.5, 25); // in IE11 this must be slightly offset
ctx.moveTo( 45, 100);
ctx.lineTo(150, 100);
ctx.stroke();
<canvas id=c></canvas>
Remember beginPath() for animation.

You can use Bezier Curves to 'transform' your arc.
There's some math involved in calculating the perfect ends of your stretched circle but I guessed and tweaked my numbers.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(40, 20);
ctx.lineTo(100, 20);
ctx.bezierCurveTo(130, 20, 130, 60, 100, 60);
ctx.lineTo(40, 60);
ctx.bezierCurveTo(10, 60, 10, 20, 40, 20);
ctx.stroke();
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(40, 80);
ctx.bezierCurveTo(68, 80, 68, 120, 40, 120);
ctx.bezierCurveTo(12, 120, 12, 80, 40, 80);
ctx.fill();
ctx.stroke();
<canvas id="myCanvas"></canvas>

You could draw the left and right halves of a circle using arc, then do a fillRect in between to connect them.
Edit: To elaborate on what I said earlier:
function init() {
let canvas = document.getElementById('myCanvas');
canvas.width = 400;
canvas.height = 400;
canvas.style.width = "400px";
canvas.style.height = "400px";
let ctx = canvas.getContext("2d");
function fillArc(ctx, cx, cy, r, startDeg, endDeg) {
ctx.beginPath();
ctx.arc(cx, cy, r, startDeg * Math.PI / 180, endDeg * Math.PI / 180);
ctx.fill();
}
function fillOval(ctx, cx, cy, r, sideLength, skipFirstArc) {
if (!skipFirstArc) {
fillArc(ctx, cx, cy, r, 90, 270);
}
ctx.fillRect(cx, cy - r, sideLength, r * 2);
fillArc(ctx, cx + sideLength, cy, r, 270, 90);
}
let sideLength = 0;
ctx.fillStyle = 'red';
function animateOval() {
if (sideLength === 100) {
ctx.clearRect(0, 0, 400, 400);
}
else {
fillOval(ctx, 30, 30, 25, sideLength, sideLength > 0);
}
++sideLength;
if (sideLength > 100) {
sideLength = 0;
}
}
setInterval(animateOval, 16);
}
Here's a Plunker with the above code running: http://plnkr.co/edit/vNqoUjPKg2lqC7JtYuEb?p=preview

JavaScript Canvas/fillStyle Troubleshooting

I am currently developing a program called "Drive a Car" with my friend, where one car is controlled via WASD and the other is controlled with arrow keys. The problem is that the chassis color on the bottom car "function drawCar2()" seems to have a connection with the tires on the top car "function drawCar()", yet I cannot seem to find this connection. I even made two separate animation loops and tried to draw the tires in a different function. How can I fix this?
JSBin link: http://jsbin.com/yelojob/28/edit?html,css,js,output
drawCar functions:
function drawCar(x,y,angle,car1Color,wheel1Color) {
ctx.save();
ctx.translate(x,y);
ctx.rotate(angle);
//Chassis
ctx.fillStyle = car1Color;
ctx.fillRect(50, 50, 110, 25);
ctx.fill();
//Wheels
ctx.beginPath();
ctx.fillStyle = wheel1Color;
ctx.arc(75, 75, 15, 0, Math.PI, false);
ctx.arc(135, 75, 15, 0, Math.PI, false);
ctx.fill();
//Windows
ctx.fillStyle = 'lightblue';
ctx.fillRect(120,25,5,25);
ctx.fillStyle = 'darkorange'
ctx.fillRect(153,55,7,10);
ctx.fillStyle = 'darkred';
ctx.fillRect(50,58,7,10);
ctx.fillStyle = 'white';
ctx.fillRect(50,56,7,2);
ctx.restore();
}
function drawCar2(x,y,angle,car2Color,wheel2Color) {
ctx.save();
ctx.translate(x,y);
ctx.rotate(angle);
//Chassis
ctx.fillStyle = car2Color;
ctx.fillRect(50, 150, 110, 25);
ctx.fill();
//Wheels
ctx.beginPath();
ctx.fillStyle = wheel2Color;
ctx.arc(75, 175, 15, 0, Math.PI, false);
ctx.arc(135, 175, 15, 0, Math.PI, false);
ctx.fill();
//Windows
ctx.fillStyle = 'lightblue';
ctx.fillRect(120,125,5,25);
ctx.fillStyle = 'darkorange'
ctx.fillRect(153,155,7,10);
ctx.fillStyle = 'darkred';
ctx.fillRect(50,158,7,10);
ctx.fillStyle = 'white';
ctx.fillRect(50,156,7,2);
ctx.restore();
}

Javascript canvas change shape dynamically

I am trying to make a drawing I made in the canvas change shape dynamically based on variables I pass in. what I have is that if want to change the shape of the monster or make it bigger, I have to change a lot of values to make it happen, how do I make all my number so that when I change it at 1 place, the change happens everywhere.
Here is the code on code pen
here is the html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Monster</title>
</head>
<body>
<canvas id="canvas" width="900" height="800" style="light-grey; border: 1px solid black">
Your browser does not support canvas
</canvas>
</body>
</html>
here is the javascript code
window.onload = function(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var x = 0;
var y = 0;
var width = 0;
var height = 0;
var radius = 0;
var squareLength = 450;
ctx.save();
ctx.beginPath();
ctx.fillStyle = '#33b262';
//Translate to the center of the canvas
ctx.translate(x+ 450, y+ 350);
ctx.rotate(Math.PI /4);
ctx.translate(x+ (-(squareLength / 2)), y+ (- (squareLength / 2)));
ctx.fillRect(x + 0,y+ 0, width + squareLength, height+
squareLength);
ctx.restore();
ctx.closePath();
// eye
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(x + 450, y+ 210, radius+ 75, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.fill();
// eye black filling
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.arc(x + 450, y+ 210, radius+ 17, 0, 2 * Math.PI, false);
ctx.closePath();
ctx.fill();
//mouth
ctx.beginPath();
ctx.restore();
ctx.translate(x+ 250,y+ 100);
ctx.rect(x + 100,y+ 300, width + 200,height+ 70);
ctx.fillStyle = 'black';
ctx.fill();
ctx.closePath();
//left tooth
ctx.beginPath();
ctx.restore();
ctx.rect(x + 135,y+ 300, width + 30,height+ 30);
ctx.fillStyle = 'white';
ctx.fill();
ctx.closePath();
//right tooth
ctx.beginPath();
ctx.restore();
ctx.rect(x + 237,y+ 300, width + 30,height+ 30);
ctx.fillStyle = 'white';
ctx.fill();
ctx.closePath();
//bottom tooth
ctx.beginPath();
ctx.restore();
ctx.rect(x + 185,y+ 340, width + 30,height+ 30);
ctx.fillStyle = 'white';
ctx.fill();
ctx.closePath();
//left leg
ctx.beginPath();
ctx.fillStyle = '#800000';
ctx.moveTo(x + 303, y+ 465);
ctx.lineTo(x + 335, y+ 433);
ctx.lineTo(x + 335, y+ 615);
ctx.lineTo(x + 303, y+ 615);
ctx.fill();
ctx.closePath();
//right leg
ctx.beginPath();
ctx.fillStyle = '#800000';
ctx.moveTo(x + 97, y+ 465);
ctx.lineTo(x + 65, y+ 433);
ctx.lineTo(x + 65, y+ 615);
ctx.lineTo(x + 97, y+ 615);
ctx.fill();
ctx.closePath();
//right shoe
ctx.fillStyle = '#330000';
ctx.beginPath();
ctx.arc(x + 319, y+ 660, radius+ 65, 0, 1 * Math.PI, true);
ctx.closePath();
ctx.fill();
//right shoe
ctx.fillStyle = '#330000';
ctx.beginPath();
ctx.arc(x + 79, y+ 660, radius+ 65, 0, 1 * Math.PI, true);
ctx.closePath();
ctx.fill();
};

You can use canvas.scale method for this kind of purposes
https://www.w3schools.com/tags/canvas_scale.asp
I wrap up my drawing code into a function and add a plus line at the beginning of it:
function drawShape(scalewidth,scaleheight) {
ctx.scale(scalewidth,scaleheight);
...
}
Then call it with some values:
drawShape(0.5, 0.5);

Animate drawn object in canvas

So I have a drawn object:
and it is placed in a block
I need it to animate it with requestAnimationFrame() method and use translate, rotate, scale while it jumps from the bottom to the top sliding to the right.
The problem is I dont know how to merge all of the shapes I've made to one (or how to animate it).
The code of the shape is:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var counterClockwise = false;
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "white";
ctx.moveTo(10, 10);
ctx.lineTo(10, 100);
ctx.stroke();
ctx.beginPath();
ctx.arc(12, 38, 26, 4.7, Math.PI * .5, false);
ctx.lineWidth = "5";
ctx.strokeStyle = 'white';
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "green";
ctx.moveTo(60, 10);
ctx.lineTo(40, 100);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "green";
ctx.moveTo(60, 10);
ctx.lineTo(80, 100);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "purple";
ctx.moveTo(80, 10);
ctx.bezierCurveTo(100, 145, 150, 100, 145, 10);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "cyan";
ctx.moveTo(160, 10);
ctx.lineTo(160, 95);
ctx.lineTo(200, 95);
ctx.stroke();
#myCanvas { background: #F00; }
<canvas id="myCanvas"></canvas>
Thanks in advance.

You can draw the content of another canvas on your "output" canvas using drawImage (see MDN). This example shows how to scale the image using the dWidth and dHeight parameters:
var c = document.getElementById("myCanvas");
var out = document.getElementById("out");
var ctx = c.getContext("2d");
var outCtx = out.getContext("2d");
var counterClockwise = false;
draw();
outCtx.drawImage(c, 0, 10, 150, 150)
function draw() {
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "white";
ctx.moveTo(10, 10);
ctx.lineTo(10, 100);
ctx.stroke();
ctx.beginPath();
ctx.arc(12, 38, 26, 4.7, Math.PI * .5, false);
ctx.lineWidth = "5";
ctx.strokeStyle = 'white';
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "green";
ctx.moveTo(60, 10);
ctx.lineTo(40, 100);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "green";
ctx.moveTo(60, 10);
ctx.lineTo(80, 100);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "purple";
ctx.moveTo(80, 10);
ctx.bezierCurveTo(100, 145, 150, 100, 145, 10);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "cyan";
ctx.moveTo(160, 10);
ctx.lineTo(160, 95);
ctx.lineTo(200, 95);
ctx.stroke();
}
canvas { background: #F00; }
<canvas id="myCanvas"></canvas>
<canvas id="out"></canvas>

You dont need a extra canvas tag .
You will need to create new object .
Like this for example :
Change enableRotate to true to see rotate in same time .
var c = document.getElementById("myCanvas");
var out = document.getElementById("out");
var ctx = c.getContext("2d");
var outCtx = out.getContext("2d");
var counterClockwise = false;
var IAM_ANIMATION = {
globalLeft : 0 , // increment all x
globalTop : 0 , // increment all y
rotate : 0 , // rotate angle
speed : 0.1 ,
enableRotate : false ,
translate : function (){
// look at
// http://stackoverflow.com/questions/13849185/moving-an-object-along-a-straight-line-at-a-constant-speed-from-point-a-to-b
// http://jsfiddle.net/loktar/CajbL/
},
};
draw();
// just for example i will create interval
setInterval( function (){
IAM_ANIMATION.globalLeft = IAM_ANIMATION.globalLeft +
IAM_ANIMATION.speed;
if (IAM_ANIMATION.enableRotate == true) {
IAM_ANIMATION.rotate = IAM_ANIMATION.rotate + IAM_ANIMATION.speed;
}
draw()
} ,10);
outCtx.drawImage(c, 0, 0)
function draw() {
ctx.clearRect(0, 0, c.width, c.height);
ctx.save()
ctx.rotate( IAM_ANIMATION.rotate * Math.PI/180);
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "white";
ctx.moveTo( IAM_ANIMATION.globalLeft + 10, IAM_ANIMATION.globalTop + 10);
ctx.lineTo(IAM_ANIMATION.globalLeft + 10, IAM_ANIMATION.globalTop + 100);
ctx.stroke();
ctx.beginPath();
ctx.arc(IAM_ANIMATION.globalLeft +12,IAM_ANIMATION.globalTop + 38, 26, 4.7, Math.PI * .5, false);
ctx.lineWidth = "5";
ctx.strokeStyle = 'white';
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "green";
ctx.moveTo( IAM_ANIMATION.globalLeft + 60,IAM_ANIMATION.globalTop + 10);
ctx.lineTo(IAM_ANIMATION.globalLeft + 40, IAM_ANIMATION.globalTop +100);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "green";
ctx.moveTo( IAM_ANIMATION.globalLeft + 60,IAM_ANIMATION.globalTop + 10);
ctx.lineTo( IAM_ANIMATION.globalLeft + 80, IAM_ANIMATION.globalTop +100);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "purple";
ctx.moveTo(IAM_ANIMATION.globalLeft +80,IAM_ANIMATION.globalTop + 10);
ctx.bezierCurveTo(IAM_ANIMATION.globalLeft +100, IAM_ANIMATION.globalTop + 145, IAM_ANIMATION.globalLeft +150, IAM_ANIMATION.globalTop +100,IAM_ANIMATION.globalLeft + 145, IAM_ANIMATION.globalTop +10);
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = "5";
ctx.strokeStyle = "cyan";
ctx.moveTo( IAM_ANIMATION.globalLeft + 160,IAM_ANIMATION.globalTop + 10);
ctx.lineTo( IAM_ANIMATION.globalLeft + 160,IAM_ANIMATION.globalTop + 95);
ctx.lineTo( IAM_ANIMATION.globalLeft + 200,IAM_ANIMATION.globalTop + 95);
ctx.stroke();
ctx.restore();
}
<canvas id="myCanvas"></canvas>
<canvas id="out"></canvas>
<style>canvas { background: #F00; }</style>
Next level is to create class PAUL :
for example var NEW_PAUL = new PAUL("enter text");
I build whole system support for canvas object. My idea is one canvas for user visible view . See more about my canvas code :
https://bitbucket.org/nikola_l/visual-js
Rotate and translate
View it all at jsFiddle online examples

HTML5 Canvas try to get zoom effect instead of scaling just with div movement's (left, top)

I try to get zoom effect instead of scaling just with div movement's (left, top) and increase canvas size:
i bind mouse click for this functionality:
first click works perfect (where i click there zoom in)
second click doesn't work (where i click not zoom in this position)
i need get zoom like this: http://phrogz.net/tmp/canvas_zoom_to_cursor.html but not use scale and translate i just need use $(div).css('left', 'xPX') and $(div).css('top', 'xPX');
/* DOCUMENTATION:
first click = 1.4 scale
second click = 1.8 scale
i try to get zoom effect instead of scaling just with div movement's (left, top):
first click works perfect (where i click there zoom in)
second click doesn't work (where i click not zoom in this position)
*/
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
$('#p').css('left', '100px');
$('#p').css('top', '100px');
var click = 0;
draw100Scale();
$(document).click(function(e) {
var pos = getMousePos(e);
if(click == 0) {
/* FIRST CLICK == FIRST ZOOM */
canvas.width = 700; //500 + 40% = 700
canvas.height = 700; //500 + 40% = 700
$('#p').css('left', $('#p').offset().left + $('#p').offset().left * 40 / 100 - pos.x * 40 / 100);
$('#p').css('top',
$('#p').offset().top + $('#p').offset().top * 40 / 100 - pos.y * 40 / 100);
draw140Scale();
click++;
} else {
/* SECOND CLICK = SECOND ZOOM */
canvas.width = 900; //500 + 80% = 900
canvas.height = 900; //500 + 80% = 900
$('#p').css('left', $('#p').offset().left + $('#p').offset().left * 80 / 100 - pos.x * 80 / 100);
$('#p').css('top',
$('#p').offset().top + $('#p').offset().top * 80 / 100 - pos.y * 80 / 100);
draw180Scale();
click++;
}
});
/* FUNCTIONS */
function getMousePos(evt) {
evt = evt.originalEvent || window.event || evt;
if (evt.clientX !== undefined && evt.clientY !== undefined) {
return {
x: evt.clientX,
y: evt.clientY
};
}
}
function draw100Scale() {
ctx.fillStyle = '#CECECE';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);
ctx.fillStyle = 'green';
ctx.fillRect(100, 200, 100, 100);
ctx.fillStyle = 'blue';
ctx.fillRect(100, 300, 100, 100);
ctx.fillStyle = 'yellow';
ctx.fillRect(200, 100, 100, 100);
ctx.fillStyle = 'pink';
ctx.fillRect(200, 200, 100, 100);
ctx.fillStyle = 'orange';
ctx.fillRect(200, 300, 100, 100);
ctx.fillStyle = 'violet';
ctx.fillRect(300, 100, 100, 100);
ctx.fillStyle = 'grey';
ctx.fillRect(300, 200, 100, 100);
ctx.fillStyle = 'white';
ctx.fillRect(300, 300, 100, 100);
}
function draw140Scale() {
ctx.fillStyle = '#CECECE';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'red';
ctx.fillRect(140, 140, 140, 140);
ctx.fillStyle = 'green';
ctx.fillRect(140, 280, 140, 140);
ctx.fillStyle = 'blue';
ctx.fillRect(140, 420, 140, 140);
ctx.fillStyle = 'yellow';
ctx.fillRect(280, 140, 140, 140);
ctx.fillStyle = 'pink';
ctx.fillRect(280, 280, 140, 140);
ctx.fillStyle = 'orange';
ctx.fillRect(280, 420, 140, 140);
ctx.fillStyle = 'violet';
ctx.fillRect(420, 140, 140, 140);
ctx.fillStyle = 'grey';
ctx.fillRect(420, 280, 140, 140);
ctx.fillStyle = 'white';
ctx.fillRect(420, 420, 140, 140);
}
function draw180Scale() {
ctx.fillStyle = '#CECECE';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'red';
ctx.fillRect(180, 180, 180, 180);
ctx.fillStyle = 'green';
ctx.fillRect(180, 360, 180, 180);
ctx.fillStyle = 'blue';
ctx.fillRect(180, 540, 180, 180);
ctx.fillStyle = 'yellow';
ctx.fillRect(360, 180, 180, 180);
ctx.fillStyle = 'pink';
ctx.fillRect(360, 360, 180, 180);
ctx.fillStyle = 'orange';
ctx.fillRect(360, 540, 180, 180);
ctx.fillStyle = 'violet';
ctx.fillRect(540, 180, 180, 180);
ctx.fillStyle = 'grey';
ctx.fillRect(540, 360, 180, 180);
ctx.fillStyle = 'white';
ctx.fillRect(540, 540, 180, 180);
}
* {
margin: 0px;
padding: 0px;
}
#c {
position: absolute;
}
#p {
position: absolute;
left: 0px;
top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='p'>
<canvas id='c' width='500' height='500'></canvas>
</div>