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
Related
So I trying to get build an arc with text on it as rounded rectangle in context 2d but the text is going under it and is getting hidden, also, the fill style for arc is getting overridden by the fill style for text. Here is what I am getting and what I want:
Here is the js fiddle with the code : https://jsfiddle.net/abhishek_soni/vzs6dLy9/19/
Here is the same code :
Html code :
<canvas></canvas>
Js code :
var roundRect = function(ctx, x, y, w, h, r) {
var x2 = x + w;
var y2 = y + h;
if (w < 2 * r) r = w / 2;
if (h < 2 * r) r = h / 2;
ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.arcTo(x2, y, x2, y2, r);
ctx.arcTo(x2, y2, x, y2, r);
ctx.arcTo(x, y2, x, y, r);
ctx.arcTo(x, y, x2, y, r);
};
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
context.save();
roundRect(context, 0, 0, 50, 60, 20);
context.fillStyle = 'red'; // This should work, but it doesn't
context.fill();
context.restore();
context.fillStyle = 'green';
context.fillText('Hey', 50, 80) // if I change this to 50 it hides behind the arc, which I don't want.
context.textAlign = "center";
context.fill();
context.save();
roundRect(context, 100, 100, 50, 90, 20);
context.fillStyle = 'red'; // This should work, but it doesn't
context.fill();
context.restore();
context.fillStyle = 'green';
context.fillText('Hey', 90, 100) // if I change this to 50 it hides behind the arc, which I don't want.
context.textAlign = "center";
context.fill();
context.save();
roundRect(context, 300, 100, 50, 120, 20);
context.fillStyle = 'red'; // This should work, but it doesn't
context.fill();
context.restore();
context.fillStyle = 'green';
context.fillText('Hey', 90, 130) // if I change this to 50 it hides behind the arc, which I don't want.
context.textAlign = "center";
context.fill();
The problem is you are calling fill() after you create the text which you don't need. That fill() is being applied to the shape drawn previously. The purpose of methods like fillText() and fillRect() are to allow you to draw without the need to call fill() after.
Don't call fill after the text and it works.
Next to align your text in the center of the shape I would calculate the center and place the text there and then use context.textAlign = 'center'; to center it.
Here's an example
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
canvas.width = innerWidth;
canvas.height = innerHeight;
let center = {}
var roundRect = function(ctx, x, y, w, h, r) {
var x2 = x + w;
var y2 = y + h;
center = {x: x + w/2, y: y + h/2}
if (w < 2 * r) r = w / 2;
if (h < 2 * r) r = h / 2;
ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.arcTo(x2, y, x2, y2, r);
ctx.arcTo(x2, y2, x, y2, r);
ctx.arcTo(x, y2, x, y, r);
ctx.arcTo(x, y, x2, y, r);
ctx.closePath();
};
context.fillStyle = 'red';
roundRect(context, 0, 0, 50, 60, 20);
context.fill();
context.fillStyle = 'green';
context.textAlign = 'center';
context.fillText('Hey', center.x, center.y);
context.textAlign = "center";
context.fillStyle = 'red';
roundRect(context, 100, 100, 50, 90, 20);
context.fill();
context.fillStyle = 'green';
context.textAlign = 'center';
context.fillText('Hey', center.x, center.y)
context.textAlign = "center";
context.fillStyle = 'red';
roundRect(context, 300, 100, 50, 120, 20);
context.fill();
context.fillStyle = 'green';
context.textAlign = 'center';
context.fillText('Hey', center.x, center.y);
context.textAlign = "center";
<canvas id="canvas"></canvas>
I'm also going to add an example using a class to do this. I prefer this over the other method. If you don't need different color shapes you can get rid of the color argument. And if you want different color text you can add one for that.
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
canvas.width = innerWidth;
canvas.height = innerHeight;
class roundRect {
constructor(x, y, w, h, r, c) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.x2 = this.x + this.w;
this.y2 = this.y + this.h;
this.center = { x: x + w / 2, y: y + h / 2 };
this.r = r;
this.color = c;
}
drawShape() {
if (this.w < 2 * this.r) this.r = this.w / 2;
if (this.h < 2 * this.r) this.r = this.h / 2;
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.moveTo(this.x + this.r, this.y);
ctx.arcTo(this.x2, this.y, this.x2, this.y2, this.r);
ctx.arcTo(this.x2, this.y2, this.x, this.y2, this.r);
ctx.arcTo(this.x, this.y2, this.x, this.y, this.r);
ctx.arcTo(this.x, this.y, this.x2, this.y, this.r);
ctx.closePath();
ctx.fill();
}
drawText() {
ctx.fillStyle = 'green';
ctx.textAlign = "center";
ctx.textBaseline = 'middle';
ctx.fillText("Hey", this.center.x, this.center.y);
}
}
let rect1 = new roundRect(0, 0, 50, 60, 20, 'red', 'Text')
let rect2 = new roundRect(60, 0, 50, 80, 20, 'lightblue', 'Text')
let rect3 = new roundRect(120, 0, 50, 100, 20, 'lightgreen', 'Text')
rect1.drawShape();
rect1.drawText();
rect2.drawShape();
rect2.drawText();
rect3.drawShape();
rect3.drawText();
<canvas id="canvas"></canvas>
EDIT:
To rotate your text use the following.
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
canvas.width = innerWidth;
canvas.height = innerHeight;
let center = {}
var roundRect = function(ctx, x, y, w, h, r) {
var x2 = x + w;
var y2 = y + h;
center = {x: x + w/2, y: y + h/2}
if (w < 2 * r) r = w / 2;
if (h < 2 * r) r = h / 2;
ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.arcTo(x2, y, x2, y2, r);
ctx.arcTo(x2, y2, x, y2, r);
ctx.arcTo(x, y2, x, y, r);
ctx.arcTo(x, y, x2, y, r);
ctx.closePath();
};
context.fillStyle = 'red';
roundRect(context, 0, 0, 50, 60, 20);
context.fill();
context.fillStyle = 'green';
context.textAlign = 'center';
context.fillText('Hey', center.x, center.y);
context.textAlign = "center";
context.fillStyle = 'red';
roundRect(context, 100, 100, 50, 90, 20);
context.fill();
context.fillStyle = 'green';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.save() //save before you transform something
context.translate(center.x, center.y) //use this to position
context.rotate(degToRad(90)) //rotate here using degrees
context.fillText('Hey', 0, 0) //draw this a (0, 0)
context.fillStyle = 'lightblue'; //delete this
context.fillRect(0, 0, canvas.width, canvas.height) //and this
context.restore() //restore when done with all objects you want affected
context.textAlign = "center";
context.fillStyle = 'red';
roundRect(context, 300, 100, 50, 120, 20);
context.fill();
context.fillStyle = 'green';
context.textAlign = 'center';
context.fillText('Hey', center.x, center.y);
context.textAlign = "center";
function degToRad(deg) {
return deg * (Math.PI/180)
}
<canvas id="canvas"></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>
clock digit display incorrect position how to rotate correct position .
I think does not colculate correct angle of each digit.
these lines of code have error and here is calculate angle of each digit
any one finde the error and how to solve this
and how to calculate analog clock wise digit
for (var n = 1; n <=12; n++) {
var theta = (n - 12) * (Math.PI * 2) / 12;
var x = clockRadius * 0.7 * Math.cos(theta);
var y = clockRadius * 0.7 * Math.sin(theta);
ctx.fillText(n, x, y);
ctx.rotate(theta);
}
clock image here
clock clocke
<canvas id="canvas" width="150" height="150"></canvas>
<script>
function init(){
clock();
setInterval(clock, 1000);
}
function toRad(degrees) {
return degrees * (Math.PI / 180);
}
function clock(){
var ctx = document.getElementById('canvas').getContext('2d');
var clockRadius = 110;
ctx.save();
ctx.clearRect(0,0,150,150);
ctx.translate(75,75);
ctx.scale(0.4,0.4);
ctx.rotate(-Math.PI/2);
ctx.fillStyle = "white";
ctx.lineWidth = 8;
ctx.lineCap = "round";
ctx.font = '22px Helvetica,Arial,sans-serif';
ctx.fillStyle = '#fff';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
var now = new Date($("#datetime").val());
//alert(now);
var sec = now.getSeconds();
var min = now.getMinutes();
var hr = now.getHours();
hr = hr>=12 ? hr-12 : hr;
for (var n = 1; n <=12; n++) {
var theta = (n - 12) * (Math.PI * 2) / 12;
var x = clockRadius * 0.7 * Math.cos(theta);
var y = clockRadius * 0.7 * Math.sin(theta);
ctx.fillText(n, x, y);
ctx.rotate(theta );
}
ctx.strokeStyle = "white";
ctx.save();
for (var i=0; i < 12; i++){
ctx.beginPath();
ctx.rotate(Math.PI/6);
ctx.moveTo(100,0);
ctx.lineTo(120,0);
ctx.stroke();
}
ctx.restore();
// Minute marks
ctx.save();
ctx.lineWidth = 5;
for (i=0;i<60;i++){
if (i%5!=0) {
ctx.beginPath();
ctx.moveTo(117,0);
ctx.lineTo(120,0);
ctx.stroke();
}
ctx.rotate(Math.PI/30);
}
ctx.restore();
ctx.fillStyle = "black";
// write Hours
ctx.strokeStyle = "#4D514E";
ctx.save();
ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
ctx.lineWidth = 14;
ctx.beginPath();
ctx.moveTo(-20,0);
ctx.lineTo(80,0);
ctx.stroke();
ctx.restore();
// write Minutes
ctx.save();
ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(-28,0);
ctx.lineTo(110,0);
ctx.stroke();
ctx.restore();
// Write seconds
ctx.save();
ctx.rotate(sec * Math.PI/30);
ctx.strokeStyle = "#D40000";
ctx.fillStyle = "#D40000";
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(-30,0);
ctx.lineTo(110,0);
ctx.stroke();
ctx.beginPath();
ctx.arc(0,0,10,0,Math.PI*2,true);
ctx.fill();
ctx.beginPath();
ctx.arc(0,0,10,0,Math.PI*2,true);
ctx.stroke();
ctx.fillStyle = "rgba(0,0,0,0)";
ctx.arc(0,0,3,0,Math.PI*2,true);
ctx.fill();
ctx.restore();
ctx.beginPath();
ctx.lineWidth = 14;
ctx.strokeStyle = '#494545';
ctx.arc(0,0,142,0,Math.PI*2,true);
ctx.stroke();
ctx.restore();
} init();
</script>
You rotate the whole context in the line 7 of the clock function.
function clock(){
var ctx = document.getElementById('canvas').getContext('2d');
var clockRadius = 110;
ctx.save();
ctx.clearRect(0,0,150,150);
ctx.translate(75,75);
ctx.scale(0.4,0.4);
ctx.rotate(-Math.PI/2); // <-- remove this
ctx.fillStyle = "white";
...
You need to remove that. Instead of doing that you can just rotate when drawing the arms.
// write Hours
ctx.rotate( -Math.PI/2 + hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
// write Minutes
ctx.rotate( -Math.PI/2 + (Math.PI/30)*min + (Math.PI/1800)*sec )
// Write seconds
ctx.rotate( -Math.PI/2 + sec * Math.PI/30);
(and the codes for drawing digits will need a minor fix)
var theta = (n - 3) * (Math.PI * 2) / 12;
function init(){
clock();
setInterval(clock, 1000);
}
function toRad(degrees) {
return degrees * (Math.PI / 180);
}
function clock(){
var ctx = document.getElementById('canvas').getContext('2d');
var clockRadius = 110;
ctx.save();
ctx.clearRect(0,0,150,150);
ctx.translate(75,75);
ctx.scale(0.4,0.4);
ctx.fillStyle = "white";
ctx.lineWidth = 8;
ctx.lineCap = "round";
ctx.font = '22px Helvetica,Arial,sans-serif';
ctx.fillStyle = '#fff';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
var now = new Date('2000/1/1 ' + $("#datetime").val());
//alert(now);
var sec = now.getSeconds();
var min = now.getMinutes();
var hr = now.getHours();
hr = hr>=12 ? hr-12 : hr;
for (var n = 1; n <=12; n++) {
var theta = (n - 3) * (Math.PI * 2) / 12;
var x = clockRadius * 0.7 * Math.cos(theta);
var y = clockRadius * 0.7 * Math.sin(theta);
ctx.fillText(n, x, y);
}
ctx.strokeStyle = "white";
ctx.save();
for (var i=0; i < 12; i++){
ctx.beginPath();
ctx.rotate(Math.PI/6);
ctx.moveTo(100,0);
ctx.lineTo(120,0);
ctx.stroke();
}
ctx.restore();
// Minute marks
ctx.save();
ctx.lineWidth = 5;
for (i=0;i<60;i++){
if (i%5!=0) {
ctx.beginPath();
ctx.moveTo(117,0);
ctx.lineTo(120,0);
ctx.stroke();
}
ctx.rotate(Math.PI/30);
}
ctx.restore();
ctx.fillStyle = "black";
// write Hours
ctx.strokeStyle = "#4D514E";
ctx.save();
ctx.rotate( -Math.PI/2 + hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
ctx.lineWidth = 14;
ctx.beginPath();
ctx.moveTo(-20,0);
ctx.lineTo(80,0);
ctx.stroke();
ctx.restore();
// write Minutes
ctx.save();
ctx.rotate( -Math.PI/2 +(Math.PI/30)*min + (Math.PI/1800)*sec )
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(-28,0);
ctx.lineTo(110,0);
ctx.stroke();
ctx.restore();
// Write seconds
ctx.save();
ctx.rotate(-Math.PI/2 +sec * Math.PI/30);
ctx.strokeStyle = "#D40000";
ctx.fillStyle = "#D40000";
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(-30,0);
ctx.lineTo(110,0);
ctx.stroke();
ctx.beginPath();
ctx.arc(0,0,10,0,Math.PI*2,true);
ctx.fill();
ctx.beginPath();
ctx.arc(0,0,10,0,Math.PI*2,true);
ctx.stroke();
ctx.fillStyle = "rgba(0,0,0,0)";
ctx.arc(0,0,3,0,Math.PI*2,true);
ctx.fill();
ctx.restore();
ctx.beginPath();
ctx.lineWidth = 14;
ctx.strokeStyle = '#494545';
ctx.arc(0,0,142,0,Math.PI*2,true);
ctx.stroke();
ctx.restore();
} init();
canvas {
background: blue;
}
<input type="time" id="datetime" value="03:45:01">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="150" height="150"></canvas>
<script>
</script>
Since you call ctx.rotate(-Math.PI/2) at the beginning of your clock function, you need to rotate the digits back. To do this you'd need to translate context to a digit coordinates first, and then rotate the context by Math.PI/2.
Replace this part of code in your for loop:
ctx.fillText(n, x, y);
ctx.rotate(theta );
with this:
ctx.save();
ctx.translate(x, y);
ctx.rotate(Math.PI/2);
ctx.fillText(n, 0, 0);
ctx.restore();
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);
I'm trying to draw a house using Canvas and Javascript. If you look at my drawHouse() method, I want to color the roof red, and everything else white. But only the white is filling in to color everything.
Jsfiddle link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Site's Title</title>
</head>
<body>
<canvas id="myDrawing" width="300" height="300" style="border:1px solid #EEE">
</canvas>
<script>
var canvas = document.getElementById("myDrawing");
var ctx = canvas.getContext("2d");
//draws a house
function drawImage() {
drawSky();
drawGrass();
drawHouse();
}
//sets the dimensions of the canvas
var x = canvas.width / 2;
var y = 400;
var radius = 200;
var startAngle = 0;
var endAngle = 22 * Math.PI;
//draws the sky
function drawSky() {
var context = canvas.getContext('2d');
context.beginPath();
context.rect(0, 0, 300, 300);
context.fillStyle = '#0099FF';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
}
//draws green grass
function drawGrass() {
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle);
ctx.stroke();
ctx.fillStyle = "#009900";
ctx.fill();
}
function drawHouse() {
var c = document.getElementById('myDrawing');
var ctx = c.getContext('2d');
ctx.beginPath();
ctx.moveTo(95, 165);
ctx.lineTo(140, 215);
ctx.lineTo(260, 215);
ctx.lineTo(240, 165);
ctx.lineTo(95, 165);
ctx.closePath();
ctx.fillStyle = "#C81E1E";
ctx.fill();
ctx.moveTo(139, 215);
ctx.lineTo(94, 165);
ctx.lineTo(45, 215)
ctx.closePath();
ctx.fillStyle = "white";
ctx.fill();
ctx.moveTo(48, 212);
ctx.lineTo(48, 275);
ctx.lineTo(139, 275);
ctx.lineTo(139, 215);
ctx.lineTo(45, 215);
ctx.closePath();
ctx.fillStyle = "white";
ctx.fill();
ctx.stroke();
ctx.moveTo(139, 275);
ctx.lineTo(260, 267);
ctx.lineTo(260, 215);
ctx.lineTo(140, 215);
ctx.closePath();
ctx.fillStyle = "white";
ctx.fill();
ctx.stroke();
}
drawImage();
</script>
</body>
</html>
You are missing a call to ctx.beginPath in your drawHouse funciton. The fillStyle is per path, so will need to have multiple paths.
Here is the fiddle: http://jsfiddle.net/sVDSs/6/
var canvas = document.getElementById("myDrawing");
var ctx = canvas.getContext("2d");
//draws a house
function drawImage() {
drawSky();
drawGrass();
drawHouse();
}
//sets the dimensions of the canvas
var x = canvas.width / 2;
var y = 400;
var radius = 200;
var startAngle = 0;
var endAngle = 22 * Math.PI;
//draws the sky
function drawSky() {
var context = canvas.getContext('2d');
context.beginPath();
context.rect(0, 0, 300, 300);
context.fillStyle = '#0099FF';
context.fill();
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
}
//draws green grass
function drawGrass() {
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle);
ctx.stroke();
ctx.fillStyle = "#009900";
ctx.fill();
}
function drawHouse() {
var c = document.getElementById('myDrawing');
var ctx = c.getContext('2d');
ctx.beginPath();
ctx.moveTo(95, 165);
ctx.lineTo(140, 215);
ctx.lineTo(260, 215);
ctx.lineTo(240, 165);
ctx.lineTo(95, 165);
ctx.fillStyle = "red";
ctx.closePath();
ctx.fill();
ctx.beginPath(); // THIS IS THE LINE
ctx.moveTo(139, 215);
ctx.lineTo(94, 165);
ctx.lineTo(45, 215)
ctx.closePath();
ctx.fillStyle = "white";
ctx.fill();
ctx.moveTo(48, 212);
ctx.lineTo(48, 275);
ctx.lineTo(139, 275);
ctx.lineTo(139, 215);
ctx.lineTo(45, 215);
ctx.closePath();
ctx.fillStyle = "white";
ctx.fill();
ctx.stroke();
ctx.moveTo(139, 275);
ctx.lineTo(260, 267);
ctx.lineTo(260, 215);
ctx.lineTo(140, 215);
ctx.closePath();
ctx.fillStyle = "white";
ctx.fill();
ctx.stroke();
}
drawImage();