I found this tutorial on html5canvastutorials.com:
var triangle = new Kinetic.Shape(function(){
var context = this.getContext();
context.beginPath();
context.lineWidth = 4;
context.strokeStyle = "black";
context.fillStyle = "#00D2FF";
context.moveTo(120, 50);
context.lineTo(250, 80);
context.lineTo(150, 170);
context.closePath();
context.fill();
context.stroke();
});
triangle.addEventListener("mousemove", function(){
var mousePos = stage.getMousePos();
tooltip.x = mousePos.x;
tooltip.y = mousePos.y;
tooltip.text = "Cyan Triangle";
tooltip.draw();
});
The tooltip object is used without being previously defined. Does HTML 5 canvas have a predefined tooltip object? Or am i missing something here?
You missed this part of the code:
var tooltip = new Kinetic.Shape(function(){
var context = this.getContext();
context.beginPath();
context.fillStyle = "black";
context.fillRect(5, 5, 200, 30);
context.font = "12pt Calibri";
context.fillStyle = "white";
context.textBaseline = "top";
context.fillText(tooltip.text, 10, 10);
}, {
x: 5,
y: 5,
width: 200,
height: 30
});
Related
var ctx;
function roundedImage() {
var img = new Image();
img.onload = function() {
ctx.beginPath();
ctx.arc(160, 150, 75, 0, Math.PI * 2, true); //draw the circle
ctx.lineWidth = 5;
ctx.strokeStyle = 'white';
ctx.stroke();
ctx.clip();
ctx.closePath();
ctx.drawImage(img, 80, 70, 160, 160);
};
img.src = "xxxxx";
img.crossOrigin = "Anonymous";
}
function fillText(name) {
ctx.fillStyle = 'white';
ctx.font = '40pt Calibri';
ctx.fillText(name, 100, 100);
}
function backImg() {
var background = new Image();
background.src = "xxxxx";
background.onload = function(){
ctx.drawImage(background, 3, 3, canvas.width - 7, canvas.height - 7);
roundedImage()
}
}
function createCanvas(width, height) {
var canvas = document.createElement("canvas");
canvas.id = "canvas";
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
}
function admire() {
createCanvas(400,625)
backImg()
var original64 = canvas.toDataURL
console.log(original64);
}
window.onload = admire();
Everything is working fine but I am unable to get the base64 code. I am getting this in console "ƒ toDataURL() { [native code] }" How can I get base64 of canvas created.
And I want to show that base64 image in another canvas. How can I do that?
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>
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" />
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();
}