how can I fill the "new" canvas circle that appears next to the older one.
There is no problem with rectangle for example:
**
ctx.fillStyle = 'rgba('+quadratto.r+','+quadratto.g+','+quadratto.b+',1)';
quadratto.x += quadratto.speedX;
quadratto.y += quadratto.speedY;
quadratto.speedY += quadratto.speedY*(-0.15);
ctx.fillRect(quadratto.x-quadratto.h/4, quadratto.y-quadratto.h/2, 2, 2);**
What I want to do?
I'm creating animation in canvas where random-sized-color circle will appear and
it will move in a specified direction. The new canvas layaer will appear in the next frame (fps) with a new(old) circle.
var myCanvasPattern = document.createElement('canvas');
myCanvasPattern.width = window.innerWidth;
myCanvasPattern.height = window.innerHeight;
document.body.appendChild(myCanvasPattern);
var ryC = myCanvasPattern.getContext('2d');
function lottery(min, max) {
return Math.floor(Math.random()*(max-min+1))+min;
}
var allQuadro = [];
var fps = 50;
var lastTime = 0;
animationLoop();
function animationLoop(time){
requestAnimationFrame( animationLoop );
if(time-lastTime>=1000/fps){
lastTime = time;
for(var i=0;i<10;i++){
allQuadro.push({
r : lottery(0, 240),
g : lottery(0, 240),
b : lottery(0, 240),
circleR : lottery(10, 30),
x : myCanvasPattern.width/2,
y : myCanvasPattern.height/2,
speedX : lottery(-1000,1000)/100,
speedY : lottery(-1000,1000)/100
})
}
ryC.fillStyle = 'rgba(255,255,255,0.2)';
ryC.fill(0,0,myCanvasPattern.width, myCanvasPattern.height);
for(var i=0; i<allQuadro.length;i++){
var circle = allQuadro[i];
ryC.fillStyle = 'rgba('+circle.r+','+circle.g+','+circle.b+',1)';
circle.x += circle.speedX;
circle.y += circle.speedY;
//HERE's THE PROBLEM BELOW. HOW TO CREATE NEW ONE THAT APPEARS NEXT TO PREVIOUS ONE WITH NEW RANDOM COLOR
ryC.arc(circle.x-circle.circleR/2, circle.y-circle.circleR/2, circleR, 0, 2 * Math.PI);
//ryC.fill();
}
// ryC.fillStyle = 'rgba('+r+','+g+','+b+',1)';
//ryC.arc(x+speedX, y+speedY, circleR, 0, 2 * Math.PI);
//ryC.fill();
}
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
The fillRect() will fill directly to the canvas without going via a path (versus for example rect()).
The arc() on the other hand will add to a path which needs to be filled later. It also require the path to be cleared in-between the calls using beginPath().
A simple way to think about it is to wrap the necessary code into a function that acts like fillRect():
function fillArc() {
ctx.beginPath(); // clear current path
ctx.arc.apply(ctx, arguments); // apply arguments to arc() call
ctx.fill();
// notice that the arc still exist on the path after this call
// so to "truly" behave like fillRect() you could consider an
// additional beginPath() here.. it will depend on your code
}
In action:
var ctx = c.getContext("2d");
ctx.fillStyle = "#09f";
fillArc(70, 70, 70, 0, 6.28);
ctx.fillStyle = "#0a9";
fillArc(220, 70, 70, 0, 6.28);
function fillArc() {
ctx.beginPath();
ctx.arc.apply(ctx, arguments);
ctx.fill();
}
<canvas id=c></canvas>
If you are bold you can also add the method to the context itself before calling getContext():
CanvasRenderingContext2D.prototype.fillArc = function() {
this.beginPath();
this.arc.apply(this, arguments);
this.fill();
}
The use it like any other method:
ctx.fillArc( ... );
CanvasRenderingContext2D.prototype.fillArc = function() {
this.beginPath();
this.arc.apply(this, arguments);
this.fill();
}
var ctx = c.getContext("2d");
ctx.fillStyle = "#09f";
ctx.fillArc(70, 70, 70, 0, 6.28);
ctx.fillStyle = "#0a9";
ctx.fillArc(220, 70, 70, 0, 6.28);
<canvas id=c></canvas>
Basically I want to draw a slime from Dragon Quest (it looks like a water drop). I have done the following, but I'd like to know if there is a better way to do it. Maybe using Bezier curves or something like that?
Update:
I actually got everything to look like how I want it, except for the gradient for the glow spots (white)
Slime.prototype.drawEye = function(x,y,w,h)
{
ctx.save();
ctx.lineWidth = 3;
ctx.beginPath();
var c = [];
c.push("sclera");
//c.push("iris");
c.push("pupil");
var wScale = [1,2.2,3];
var hScale = [1,2,1.3];
for (var i = 0; i < c.length; i++)
{
w /= wScale[i];
h /= hScale[i];
ctx.beginPath();
ctx.ellipse(x,y,w,h,0,degreesToRadians(360),false);
ctx.fillStyle = this.colors[c[i]];
ctx.fill();
ctx.stroke();
}
ctx.restore();
}
Slime.prototype.drawMouth = function()
{
ctx.save();
ctx.beginPath();
var x = this.x+this.w/30;
var y = this.y+this.h/8;
var w = this.w;
var h = this.h/8;
var start = [x-w/3,y];
var end = [x+w/8,y+h/5];
// mouth
bezierCurve(start,[x-w/3.3,y+h*2.3],[x+w/8,y+h*1.8],end);
bezierCurveTo([x-w/10,y+h*0.6],[x-w/6,y+h*0.6],start);
ctx.lineCap = "round";
ctx.lineWidth = 8;
ctx.stroke();
ctx.clip();
ctx.fillStyle = this.colors["mouth"];
ctx.fill();
start = [x-w/3.5,y+h*1];
// tongue
ctx.beginPath();
bezierCurve(start,[x-w/5,y+h*2.5],[x+w/6.5,y+h*1.6],[x+w/9,y+h*0.75]);
bezierCurveTo([x+w/10,y+h/4],[x-w/5,y],start);
ctx.fillStyle = this.colors["tongue"];
ctx.fill();
//ctx.stroke();
ctx.restore();
}
Slime.prototype.drawHealthBar = function()
{
ctx.beginPath();
ctx.rect(this.x-this.w,this.y+this.h/2+30,this.w*2*this.health/this.maxHealth,20);
ctx.fillStyle = "#00ff00";
ctx.fill();
ctx.beginPath();
ctx.rect(this.x-this.w+(this.w*2*this.health/this.maxHealth),this.y+this.h/2+30,(this.maxHealth-this.health)/this.maxHealth*this.w*2,20);
ctx.fillStyle = "#ff0000";
ctx.fill();
ctx.beginPath();
ctx.rect(this.x-this.w,this.y+this.h/2+30,this.w*2,20);
ctx.strokeStyle = "#000000";
ctx.stroke();
}
Slime.prototype.drawBody = function()
{
ctx.save();
ctx.fillStyle = this.colors["body"];
ctx.beginPath();
var x = this.x;
var y = this.y+this.h*0.4;
var w = this.w/2;
var h = this.h;
var left = [x-w*0.97,this.y+h/11];
var bottom = [x,this.y+h*0.495];
var right = [x+w*0.97,this.y+h/15];
var top = [x+this.w/30,this.y-h/2+this.topOffset];
bezierCurve(left,[x-w,y+h/10],[x-w/7,y+h/12],bottom);
bezierCurveTo([x+w*0.8,y+h/10],[x+w*1.05,y-h/7],right);
y = this.y - (y - this.y);
bezierCurveTo([x+w*0.75,y+h/15],[x+w*0.2,y+h/4.5],top);
bezierCurveTo([x-w*0.2,y+h/5],[x-w*0.8,y+h/10],left);
ctx.lineWidth = 3;
ctx.fill();
ctx.strokeStyle = this.colors["bodyOutline"];
ctx.stroke();
ctx.clip();
ctx.shadowColor = "#000033";
ctx.shadowBlur = 40;
ctx.shadowOffsetX = ctx.shadowBlur/4;
ctx.shadowOffsetY = ctx.shadowOffsetX*-0.8;
ctx.lineWidth = 4;
for (var i = 0; i < 7; i++)
{
if (i%2==0)
{
ctx.shadowColor = "#000033";
}
else
{
ctx.shadowColor = "rgba(0,0,80,0.5)";
}
ctx.stroke();
}
ctx.restore();
}
Slime.prototype.drawGlow = function(x,y,r1,r2)
{
ctx.save();
var g = ctx.createRadialGradient(x,y,r1,x,y,r2);
g.addColorStop(0.0,"#ffffff");
g.addColorStop(1.0,this.colors["body"]);
ctx.beginPath();
ctx.arc(x,y,r2,0,degreesToRadians(360),false);
ctx.fillStyle = g;
ctx.fill();
ctx.restore();
}
Slime.prototype.draw = function()
{
ctx.lineWidth = 2;
this.drawBody();
this.drawMouth();
var w = this.w/10;
var h = this.h/10;
var x = this.x;
var y = this.y;
this.drawEye(x-this.w/4.5,y-h/2.5,w,h);
this.drawEye(this.x+this.w/13,y-h/10,w,h);
this.drawGlow(this.x-this.w/2.5,this.y+this.h/12,this.w/50,this.w/16);
this.drawGlow(this.x+this.w/2*0.7,this.y+this.h/10,this.w/50,this.w/16);
}
End update
Yes, you can draw the droplet outline using just 4 cubic Bezier curves.
Here's a proof-of-concept using just 4 C-Bez curves:
Why! Why! Why! .......... Did I enjoy creating a Slime Man??
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
drawDropletMan(20,20,'rgb(63,187,255)');
drawDropletMan(255,55,'rgb(255,180,155)');
function drawDropletMan(x,y,fill){
ctx.translate(x,y);
drawBody(fill);
circularGlow(158,111,3,18,fill);
circularGlow(32,107,3,18,fill);
eye(65,87,17,10);
eye(120,90,17,10);
mouth(33,130);
ctx.translate(-x,-y);
}
//
function drawBody(fillcolor){
ctx.save();
ctx.beginPath();
ctx.moveTo(109,0);
ctx.bezierCurveTo(111,64,199,35,198,123);
ctx.bezierCurveTo(199,139,183,192,99,190);
ctx.bezierCurveTo(66,193,-4,167,1,110);
ctx.bezierCurveTo(9,47,97,45,109,1);
ctx.fillStyle=fillcolor;
ctx.fill();
ctx.strokeStyle='black';
ctx.lineWidth=2;
ctx.stroke();
ctx.clip();
ctx.shadowColor='black';
ctx.shadowBlur=15;
ctx.lineWidth=1;
for(var i=0;i<8;i++){ctx.stroke();}
ctx.restore();
}
//
function circularGlow(x,y,r1,r2,fillcolor){
var g=ctx.createRadialGradient(x,y,r1,x,y,r2);
g.addColorStop(0.00,'white');
g.addColorStop(1.00,fillcolor);
ctx.beginPath();
ctx.arc(x,y,r2,0,Math.PI*2);
ctx.fillStyle=g;
ctx.fill();
}
//
function eye(x,y,r1,r2){
ctx.beginPath();
ctx.arc(x,y,r1,0,Math.PI*2);
ctx.fillStyle='white';
ctx.strokeStyle='black';
ctx.fill();
ctx.lineWidth=2;
ctx.stroke();
//
ctx.beginPath();
ctx.arc(x,y,r2,0,Math.PI*2);
ctx.fillStyle='black';
ctx.fill();
}
//
function mouth(){
ctx.save();
ctx.translate(5,5);
ctx.beginPath();
ctx.moveTo(44,120);
ctx.bezierCurveTo(56,136,112,132,128,123);
ctx.bezierCurveTo(138,123,143,123,132,138);
ctx.bezierCurveTo(113,165,49,169,39,127);
ctx.bezierCurveTo(41,128,32,122,44,120);
ctx.closePath();
ctx.fillStyle='black';
ctx.fill();
ctx.clip();
ctx.beginPath();
ctx.arc(90,200,56,0,Math.PI*2);
ctx.fillStyle='coral';
ctx.fill();
ctx.restore();
}
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
<canvas id="canvas" width=500 height=300></canvas>
I need help trying to rotate the rectangle that I have drawn on the canvas. I would like the top of the rectangle to pivot either to the right or left once I press on the arrow keys on my keyboard. This is my code so far:
HTML:
<body >
<div id="canvas-container">
<canvas id="canvas" width="500" height="400"></canvas>
</div>
</body>
CSS:
canvas {
display: inline;
}
Javascript:
document.addEventListener("DOMContentLoaded", function() {
drawBorder();
});
var canvas;
var context;
var size;
drawRectangle();
drawHalfCircle();
function drawBorder() {
canvas = document.getElementById("canvas");
context = canvas.getContext('2d');
size = {
x: canvas.width,
y: canvas.height
};
//have to set colors etc befor it is drawn
context.strokeStyle = 'black';
//takes 4 parameters
context.strokeRect(0, 0, size.x, size.y);
}
function drawRectangle() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.rect(246, 290, 8, 80);
ctx.stroke();
}
function drawHalfCircle(){
var c= document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(250,579,308,1.2*Math.PI, 1.8*Math.PI);
ctx.stroke();
}
I have mocked something up is this along the correct lines of what you are wanting.
document.addEventListener("DOMContentLoaded", function() {
drawBorder();
});
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var size;
var angle = 0;
setInterval(function () {
context.save();
context.clearRect(0, 0, canvas.width, canvas.height);
drawBorder();
drawHalfCircle();
drawRectangle();
context.restore();
}, 100);
function drawBorder() {
size = {
x: canvas.width,
y: canvas.height
};
//have to set colors etc befor it is drawn
context.strokeStyle = 'black';
//takes 4 parameters
context.strokeRect(0, 0, size.x, size.y);
}
function drawRectangle() {
context.rotate(Math.PI / 180 * (angle));
context.rect(246, 290, 8, 80);
context.stroke();
}
function drawHalfCircle(){
context.beginPath();
context.arc(250,579,308,1.2*Math.PI, 1.8*Math.PI);
context.stroke();
}
document.onkeydown = function(e) {
var event = window.event ? window.event : e;
if (e.keyCode == '37') {
angle += 5;
}
else if (e.keyCode == '39') {
angle -= 5;
}
}
Basically set an interval and redraw (ie frames like in a movie) and rotate via a variable.
See a demo here
https://jsbin.com/qititacazu/edit?js,output
If you want to translate it so it will rotate around a different point do something like this.
context.translate(246, 290);
context.rotate(Math.PI / 180 * (angle));
context.rect(-4, 0, 4, 80);
I am looking to print a red circle when the string contains a character 'e' and a black circle if it contains any other character.
I do not know where exactly I am getting it wrong. Can someone help me?.
This is the code I tried.
HTML
<input id="e-" placeholder="type eg:-e---ee---e" type="text" size="50"/>
<button onclick="start()">diagram</button>
<canvas id="myCanvas"></canvas>
The JavaScript
function start() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var str = getElementByID("e-");
var i;
for( i=0; i < str.length(); i++ ) {
if( str.charAt(i) == "e" ) {
ctx.beginPath();
ctx.arc(100, 75, 10, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();
} else {
ctx.beginPath();
ctx.stroke();
ctx.arc(100, 75, 10, 0, 2 * Math.PI);
ctx.fillStyle = "black";
ctx.fill();
}
}
}
You have several errors here. I'll comment in the live code below:
function start() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d")
// must be prefixed with document., small d in Id, and suffixed with value
var str = document.getElementById("e-").value;
var i = 0, ch;
while(ch = str[i++]) { // no () behind length, changed to while loop
ctx.beginPath();
if (ch === "e") { // just check straight
ctx.arc(100, 75, 10, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();
} else {
ctx.arc(100, 75, 10, 0, 2 * Math.PI);
ctx.fillStyle = "black";
ctx.fill();
}
// need to move the arc position on x axis
ctx.translate(22, 0); // diameter + 2 pixels
}
ctx.setTransform(1,0,0,1,0,0); // reset translate
}
<input id="e-" placeholder="type eg:-e---ee---e" type="text" size="50" />
<button onclick="start()">diagram</button>
<canvas id="myCanvas" width=600 ></canvas>
I want to draw one circle and a character with shadow on a canvas in a HTML page while loading the page and recreate the image on a button click. I am using this code:
window.onload = function() {
draw();
};
function draw(){
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
var width = c.width;
var height = c.height;
//DRAW A CIRCLE
var centerX = Math.floor((Math.random() * width));
var centerY = Math.floor((Math.random() * height));
var radius = Math.floor(Math.random() * 50);
var color = '#f11';
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
//DRAW A CHARACTER WITH SHADOW
var c = "S";
ctx.font = "300% Verdana";
ctx.shadowBlur = 20;
ctx.shadowColor = "black";
ctx.shadowOffsetX = 20;
ctx.shadowOffsetY = 20;
ctx.fillStyle = "#111";
ctx.fillText(c, 10, 90);
}
In HTML I am calling draw function onclick() event of a button named Refresh.
For the first time it is giving desired output by drawing one circle and a character with shadow. As I click on the Refresh button it is drawing both the objects with shadow. I dont want to draw shadow of the circle. Can anyone please tell me the mistake I'm doing here.
You may want to use the CanvasRenderingContext2D.save() method :
window.onload = function() {
draw();
};
document.getElementById("canvas").addEventListener('click', draw);
function draw(){
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
var width = c.width;
var height = c.height;
//DRAW A CIRCLE
var centerX = Math.floor((Math.random() * width));
var centerY = Math.floor((Math.random() * height));
var radius = Math.floor(Math.random() * 50);
var color = '#f11';
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
//DRAW A CHARACTER WITH SHADOW
//save the actual context
ctx.save();
var c = "S";
ctx.font = "300% Verdana";
ctx.shadowBlur = 20;
ctx.shadowColor = "black";
ctx.shadowOffsetX = 20;
ctx.shadowOffsetY = 20;
ctx.fillStyle = "#111";
ctx.fillText(c, 10, 90);
//restore it
ctx.restore();
}
canvas{border:1px solid;}
<canvas id="canvas" width="400" height="200"></canvas>