Draw a pin on Canvas using HTML5 - html

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();
}

Related

How to set color to border of circle canvas

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.

HTML keydown delete old canvas

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>

HTML5 - Clearing canvas with multiple animations - where is the main draw loop?

I have a mixture of static, interactive, and animated objects in my canvas. I can't seem to find a way to clear the draw loop in a global way such that there is no 'smearing' in any of the objects. My code is below. Any help greatly appreciated.
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var mouseX = 300;
var mouseY = 300;
var inc = 0;
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
ctx.clearRect(0, 0, canvas.width, canvas.height);
moveThing();
drawBezier();
drawCircle();
drawInteractive();
var putPoint = function (e) {
// update mouse
mouseX = e.clientX;
mouseY = e.clientY;
// clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBezier();
drawCircle();
drawInteractive();
}
canvas.addEventListener("mousemove", putPoint);
function drawBezier() {
for (var i = 0; i < 100; i++) {
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.bezierCurveTo(200, mouseX, 900, -300, i * 20, 600 + Math.random() * 30);
ctx.lineWidth = 1;
ctx.strokeStyle = "black";
ctx.stroke();
ctx.closePath();
}
}
function drawCircle() {
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
}
function drawInteractive() {
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(mouseX, mouseY - 40, 100, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
}
function moveThing() {
inc++;
// ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.arc(95, 50 + inc, 40, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
requestAnimationFrame(moveThing);
}
</script>
I have refactored your code a little creating a function update which is the main loop of the canvas.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var mouseX = 300;
var mouseY = 300;
var inc = 0;
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
update();
var putPoint = function (e) {
// update mouse
mouseX = e.clientX;
mouseY = e.clientY;
// clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBezier();
drawCircle();
drawInteractive();
}
canvas.addEventListener("mousemove", putPoint);
function drawBezier() {
for (var i = 0; i < 100; i++) {
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.bezierCurveTo(200, mouseX, 900, -300, i * 20, 600 + Math.random() * 30);
ctx.lineWidth = 1;
ctx.strokeStyle = "black";
ctx.stroke();
ctx.closePath();
}
}
function drawCircle() {
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
}
function drawInteractive() {
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(mouseX, mouseY - 40, 100, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
}
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
moveThing();
drawBezier();
drawCircle();
drawInteractive();
requestAnimationFrame(update);
}
function moveThing() {
inc++;
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.arc(95, 50 + inc, 40, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
}
<canvas id="myCanvas" />

Draw text along the arc on layer

I am trying to add text along the arc and I read the tutorial. There is a function as below. I don't quite understand the difference between Layer and Context and which one I should use. Is a Layer Canvas plus Context?
I created an arc on the layer which is different from the tutorial. In drawTextAlongArc, how can I draw the text along the arc using Layer? Or I have to use Context to do the work? It's not working now. But if it works, will the arc be drawn on the layer?
function drawTextAlongArc(context, str, centerX, centerY, radius, angle) {
var len = str.length, s;
context.save();
context.translate(centerX, centerY);
context.rotate(-1 * angle / 2);
context.rotate(-1 * (angle / len) / 2);
for(var n = 0; n < len; n++) {
context.rotate(angle / len);
context.save();
context.translate(0, -1 * radius);
s = str[n];
context.fillText(s, 0, 0);
context.restore();
}
context.restore();
}
var stage = new Kinetic.Stage({
container: "mainContainer",
width: $("#mainContainer").width(),
height: $("#mainContainer").height()
});
var layer = new Kinetic.Layer();
var kineticGroup = new Kinetic.Group({
x: 300,
y: 120,
draggable: true,
fill: 'black',
draggable: true
});
var arc = new Kinetic.Arc({
innerRadius: 90,
outerRadius: 92,
stroke: 'black',
strokeWidth: 1,
angle: 180,
rotationDeg: 180
});
var canvas = layer.getCanvas(),
context = canvas.getContext('2d'),
centerX = canvas.width / 2,
centerY = canvas.height - 30;
drawTextAlongArc(context, 'Text along arc path', centerX, centerY, 92, 180);
context.stroke();
kineticGroup.add(arc);
layer.add(kineticGroup);
stage.add(layer);
stage.draw();

Can not draw a circle on top of rectangle in html5

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.