The code below should make a canvas appear when I click on "space". Every time I click on "space" then it should delete the old canvas and draw a new one (the position is chosen among 6 different possibilities at each click).
I have a problem with the code because it does not delete the old canvas and keeps on drawing them one on top of the other.
How can I fix the problem?
<html>
<head>
</head>
<link rel="stylesheet" href="cssFiles/blackBackground.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<canvas id="myCanvas" width="1260" height="1000" style="border:1px solid red;"></canvas>
<script>
var circle = [[-350,-300],[-350,0],[-350,300],[350,-300],[350,0],[350,300]];
$(document).ready(function() {
document.addEventListener("keydown", function (e) {
if (e.keyCode === 32) { // space is pressed
var idx_circle = Math.floor(Math.random() * 6)
drawCircle(circle[idx_circle][0],circle[idx_circle][1],2.5,1);
}
});
})
function drawCircle(centerX,centerY, scaleX, scaleY){
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var radius = 120;
// save state
context.save();
// translate context
context.translate(canvas.width/2 , canvas.height/2 );
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = 'white';
context.fill();
context.lineWidth = 20;
context.strokeStyle = 'white';
context.stroke();
}
</script>
</body>
</html>
You'd have to clear the canvas using clearRect method, before drawing the circle ...
context.clearRect(0, 0, canvas.width, canvas.height);
var circle = [
[-350, -300],
[-350, 0],
[-350, 300],
[350, -300],
[350, 0],
[350, 300]
];
document.addEventListener("keydown", function(e) {
if (e.keyCode === 32) { // space is pressed
var idx_circle = Math.floor(Math.random() * 6);
drawCircle(circle[idx_circle][0], circle[idx_circle][1], 2.5, 1);
}
});
function drawCircle(centerX, centerY, scaleX, scaleY) {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var radius = 120;
// clear canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// save state
context.save();
// translate context
context.translate(canvas.width / 2, canvas.height / 2);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// apply styling
context.fillStyle = 'red';
context.fill();
context.lineWidth = 20;
context.strokeStyle = 'black';
context.stroke();
// restore to original state
context.restore();
}
<canvas id="myCanvas" width="1260" height="1000" style="border:1px solid red;"></canvas>
Related
I have created circle in QML using canvas 2D. Half circle has light green color and another half sky blue but now i don't know how to set border color to this circle. anyone know how to set color to border of this circle??
Canvas {
anchors.fill: parent
onPaint: {
var ctx = getContext("2d");
ctx.reset();
var centreX =900;
var centreY = 150;
ctx.beginPath();
ctx.fillStyle = "#16AA55"; //green
ctx.moveTo(centreX, centreY);
ctx.arc(centreX, centreY,100, Math.PI * 0.01, Math.PI * 1, false);
ctx.lineTo(centreX, centreY);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "#26A7CA";
ctx.moveTo(centreX, centreY);
ctx.arc(centreX, centreY, 100, Math.PI * 1, Math.PI * 2.01, false);
ctx.lineTo(centreX, centreY);
ctx.fill();
}
You need the strokeStyle property to do this. Before drawing the shape onto the canvas set it to whatever color you want. More on this
Below is a snippet that draws two circles with different border colors.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.strokeStyle = "#FF0000";
ctx.stroke();
ctx.beginPath();
ctx.arc(210, 75, 50, 0, 2 * Math.PI);
ctx.strokeStyle = "blue";
ctx.stroke();
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
Hope this helps :)
Try this please:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, Math.PI, 1.5 * Math.PI);
ctx.stroke();
// set this as the background color
ctx.beginPath();
ctx.strokeStyle = "green";
ctx.arc(100, 75, 50, Math.PI, 2 * Math.PI);
ctx.stroke();
This will change the same half circle with different color.
How to draw a line in html 5 canvas?
I achived to draw an rectangle but how to draw a straight line. Here is my code.
function redraw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (!path.length)
return;
ctx.beginPath();
ctx.moveTo.apply(ctx, path[0]);
for (var i = 1,
len = path.length; i < len; ++i)
ctx.lineTo.apply(ctx, path[i]);
ctx.strokeStyle = '#000';
ctx.stroke();
var start = new Date;
var bounds = contextBoundingBox(ctx);
ms.value = ms.value * 1 + Math.round(((new Date) - start - ms.value) / 4);
ctx.strokeStyle = '#c00';
ctx.strokeRect(bounds.x, bounds.y, bounds.w, bounds.h);
}
This above code is for drawing the rectangle, please modify the code to draw a straight line.
DEMO
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
//add event listner to canvas
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mousemove', mouseMove, false);
canvas.addEventListener('mouseup', mouseUp, false);
var mouseDown = false;
var points = [];
var lines = [];
var linePoint = [];
var stPoint;
var endPoint;
var imageObj = new Image();
imageObj.onload = function() {
ctx.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
function Point(x, y) {
this.x = x;
this.y = y;
}
function lineP(stPoint, endPoint) {
this.stPoint = stPoint;
this.endPoint = endPoint;
}
function mouseDown(e) {
mouseDown = true;
stPoint = new Point(e.layerX, e.layerY); //get start point for line
}
function mouseMove(e) {
if (!mouseDown) return;
ctx.clearRect(0, 0, canvas.width, canvas.height); //clear canvas
ctx.drawImage(imageObj, 0, 0, canvas.width, canvas.height); //redraw image
drawLines(); //draw previous lines
ctx.beginPath();
ctx.moveTo(stPoint.x, stPoint.y);
ctx.lineTo(e.layerX, e.layerY);
ctx.stroke();
ctx.closePath();
}
function mouseUp(e) {
mouseDown = false;
endPoint = new Point(e.layerX, e.layerY); //get end point
linePoint.push(new lineP(stPoint, endPoint)); //store line points for next draw
console.log(linePoint);
}
//draw all lines from stored point
function drawLines() {
linePoint.forEach(function(item) {
ctx.beginPath();
ctx.moveTo(item['stPoint'].x, item['stPoint'].y);
ctx.lineTo(item['endPoint'].x, item['endPoint'].y);
ctx.stroke();
ctx.closePath();
})
}
canvas {
border: 1px solid #999;
}
<canvas id="canvas" width="300" height="300"></canvas>
On mouse down store start value of line and on mouse up store end point of line. (event.layerX,event.layerY) will give the point cordinate.
want to draw rectangle using canvas html5 but this rectangle bent arch shape like in picture
use quadraticCurveTo(x,y,Bx,By);
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(200, 200);
context.quadraticCurveTo(400, 300, 600, 200);
context.quadraticCurveTo(500, 300, 600, 400);
context.quadraticCurveTo(400, 300, 200, 400);
context.quadraticCurveTo(300, 300, 200, 200);
context.closePath();
// line color
context.lineWidth = 10;
context.strokeStyle = 'black';
context.stroke();
context.fillStyle = 'green';
context.fill();
http://codepen.io/hamed19/pen/QyXbNp
You can create a path with quadratic curves for everything except the left & right sides (lines):
Example code and a Demo:
Using styling to mimic the question's image
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
drawArchedRect(10,10,330,192,10,25,'lightgray','gray');
function drawArchedRect(x,y,w,h,offset,dipy,strokecolor,shadow){
ctx.translate(x,y);
ctx.beginPath();
ctx.moveTo(offset,0);
ctx.quadraticCurveTo(offset+w/2,dipy ,w-offset,0);
ctx.quadraticCurveTo(w,0, w,offset);
ctx.lineTo(w,h-offset);
ctx.quadraticCurveTo(w,h, w-offset,h);
ctx.quadraticCurveTo(offset+w/2,h-dipy ,offset,h);
ctx.quadraticCurveTo(0,h, 0,h-offset);
ctx.lineTo(0,offset);
ctx.quadraticCurveTo(0,0, offset,0);
ctx.save();
if(shadow){
ctx.clip();
ctx.shadowColor=shadow;
ctx.shadowBlur=5;
}
ctx.strokeStyle=strokecolor;
ctx.lineWidth=1.5;
ctx.stroke();
ctx.restore();
}
<canvas id="canvas" width=350 height=300></canvas>
I am using html5 and I want to draw a circle on top of a rectangle so I used the following html code:
<canvas id="myCanvas" style="z-index: 1;width:70%;height: 70%;float: left;">
<canvas id="c1" style="z-index: 2;width:10%;height: 10%;float: left;"></canvas>
and following js code:
$(document).ready(function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(10,10,$("#myCanvas").height(),$("#myCanvas").width());
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.stroke();
var canvas = document.getElementById('c1');
var context = canvas.getContext('2d');
var centerX = $("#myCanvas").height()/ 2;
var centerY = $("#myCanvas").width() / 2;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();
});
and here is the jfiddle link:
jfiddle
Now the problem is that the circle is not shown and I do not know what is the problem!!!
Can anyone help me?
Are you sure you need two canvases? I would do it on one.
$(document).ready(function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(10,10,$("#myCanvas").height(),$("#myCanvas").width());
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.stroke();
var centerX = $("#myCanvas").height()/ 2;
var centerY = $("#myCanvas").width() / 2;
var radius = 70;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'green';
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = '#003300';
ctx.stroke();
});
http://jsfiddle.net/7FuL9/2/
Why do you need two canvas tags to do this? This can be done with just one canvas. Here is a JSBin that draws a circle on top of a rectangle.
I need to draw a pin like: http://www.clipartbest.com/clipart-9czEGGdRi using HTML5 on a Canvas.
Here's what I have: http://jsfiddle.net/u5jNR/
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = .9 * Math.PI;
var endAngle = 2.1 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = 'black';
context.stroke();
var radius = 20;
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green';
context.fill();
context.stroke();
the problem I am having is I don't know how to extend the two ends.
Thanks in advance
Here's an example of using path commands to draw a pin.
Assume you have an object defining the pin's x,y & color:
var pin = { x:x, y:y, color:color };
Then you can draw that pin like this:
function drawPin(pin){
ctx.save();
ctx.translate(pin.x,pin.y);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.bezierCurveTo(2,-10,-20,-25,0,-30);
ctx.bezierCurveTo(20,-25,-2,-10,0,0);
ctx.fillStyle=pin.color;
ctx.fill();
ctx.strokeStyle="black";
ctx.lineWidth=1.5;
ctx.stroke();
ctx.beginPath();
ctx.arc(0,-21,3,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle="black";
ctx.fill();
ctx.restore();
}