<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>Animating Sprites In HTML5 Canvas | onlyWebPro.com</title>
</head>
<body>
<canvas id="myCanvas" width="100" height="100">
<!-- Insert fallback content here -->
Sorry, your browser doesn't support canvas technology
</canvas>
<script>
var width = 100,
height = 100,
frames = 4,
currentFrame = 0,
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
image = new Image()
image.src = 'sprite.png';
var draw = function(){
ctx.clearRect(0, 0, width, height);
ctx.drawImage(image, 0, height * currentFrame, width, height, 0, 0, width, height);
if (currentFrame == frames) {
currentFrame = 0;
} else {
currentFrame++;
}
}
setInterval(draw, 100);
</script>
</body>
</html>
The above is the code for creating a canvas which runs a sprite animation sequence in canvas.
Now I want to include another canvas image in same html. when i tried the old one gets replaced so please help me to create another canvas with another image.
Anyone solve it by providing a way to create a multiple canvas in a single HTML page
Add this at html part:
<canvas id="mySecondCanvas" width="100" height="100">
<!-- Insert fallback content here -->
Sorry, your browser still doesn't support canvas technology
</canvas>
And this how you get this canvas with javascript:
var second_canvas = document.getElementById("mySecondCanvas");
:)
Related
I have created simple canvas element to draw a string "Hello World"
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
</script>
</body>
</html>
I can create MediaStream from this canvas by using HTMLCanvasElement.captureStream()
// Find the canvas element to capture
var canvasElt = document.querySelector('myCanvas');
// Get the stream
var stream = canvasElt.captureStream(25); // 25 FPS
// Do things to the stream now
How can I use this stream to get consumed by VLC or YouTube/Facebook live?
I guess MediaRecorder will help me but I dont know how.
I found https://github.com/fbsamples/Canvas-Streaming-Example but this is not looking easy way.
So, I have tried attempting this myself and have searched heavily online and I can't seem to solve this particular issue. I am attempting to make a very simple effect that looks like a very basic water ripple. I intend for the user to be able to click somewhere on the canvas, and for an empty circle (with a black stroke) to appear where the mouse has clicked (starting at a radius of zero), and continuously expand the radius as an animation.
I currently have this code:
<!DOCTYPE html>
<html>
<head>
<!-- Search Engine Optimisation (SEO) -->
<title> Ripple </title>
<meta description="Codelab assignment 3">
<meta keywords="Uni, assignment, ripple, interactive, discovery">
<!-- End of Metadata -->
<!-- Links -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<canvas id="myCanvas" width="1024" height="768" style="border: 1px solid"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var radius = 0;
//Have a rectangle fill the canvas and add a hit region
//Call the ripple function from the rectangle function
//Track mouse position in rectangle
function ripple(e) {
// ctx.clearRect(0, 0, canvasWidth, canvasHeight);
ctx.beginPath();
ctx.arc(e.clientX,e.clientY,radius,0,2*Math.PI);
//ctx.closePath();
ctx.stokeStyle = "black";
ctx.stroke();
radius++;
requestAnimationFrame(ripple);
}
canvas.addEventListener('mousedown', ripple);
</script>
</html>
This is what it currently does:
Screenshot
I really appreciate any help!
You'd have to pass the mouse event when calling the ripple function through requestAnimationFrame.
also, you'll need to set the radius to 0 and clear running animation frame (if any) on mouse click
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var radius = 0;
var rAF;
function ripple(e) {
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
ctx.beginPath();
ctx.arc(e.offsetX, e.offsetY, radius, 0, 2 * Math.PI);
ctx.stokeStyle = "black";
ctx.stroke();
radius++;
rAF = requestAnimationFrame(function() {
ripple(e);
});
}
canvas.addEventListener('mousedown', function(e) {
if (rAF) cancelAnimationFrame(rAF);
radius = 0;
ripple(e);
});
body{margin:10px 0 0 0;overflow:hidden}canvas{border:1px solid #ccc}
<canvas id="canvas" width="635" height="208"></canvas>
note: use e.offsetX and e.offsetY to get proper mouse coordinates relative to canvas.
I want to draw image in canvas and export canvas to image(jpg) file and pdf file..
It was.. click download link and popup file save dialog windows..
I have a sample source.. but good run in Chrome, but not running in IE11, IE10, IE9, IE8....
<!DOCTYPE html>
<html>
<head>
<title>toDataURL example</title>
<style>
canvas {
border:solid black 1px;
}
img {
width:400px;
height:400px;
border:solid black 1px;
}
</style>
</head>
<body>
<h1>Copy graphic using toDataURL</h1>
<div>
<button id="copy">Copy canvas image to image element</button> <br />
<canvas id="MyCanvas" width="400" height="400" >This browser or document mode doesn't support canvas</canvas>
<img id="MyPix" src="" width="400" height="400" />
</div>
<script>
// Create some graphics on the canvas.
var canvas = document.getElementById("MyCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "white";
ctx.beginPath();
ctx.rect(5, 5, 300, 250);
ctx.fill();
ctx.stroke();
ctx.arc(150, 150, 100, 0, Math.PI, false);
ctx.stroke();
}
// catch the click from the button and copy the graphic
document.getElementById("copy").addEventListener("click", function () {
var canvas1 = document.getElementById("MyCanvas");
if (canvas1.getContext) {
var ctx = canvas1.getContext("2d"); // Get the context for the canvas.
var myImage = canvas1.toDataURL("image/png"); // Get the data as an image.
}
var imageElement = document.getElementById("MyPix"); // Get the img object.
//imageElement.src = myImage; // Set the src to data from the canvas.
window.location = myImage;
}, false);
</script>
</body>
</html>
Use the toDataUrl() function
var datImage = canvas.toDataURL("image/png");
document.write('<img src="'+datImage+'"/>');
This code will take the contents of the canvas, and turn it to a PNG image, and write it onto the screen.
Note: This does not work after you draw an image onto the canvas as it changes the data URL.
Hope this helped!
I have just started looking into html5 and the canvas element and have been trying to create a simple page that rotates an image clockwise and anti clockwise on button clicks. I managed to get something working but i tested it on ie10 and the image is not showing up, just the blank grey canvas. I can only test on ie10 so not sure if this effects other versions too. My full code is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<!-- Canvas Element -->
<canvas id="canvas" width="500" height="500" style="background-color: #EAEAEA;">
</canvas>
<!-- Rotate Buttons -->
<h2>Rotate</h2>
<button onclick="rotate('c')">Clockwise</button>
<button onclick="rotate('a')">Anti-Clockwise</button>
<button onclick="rotate('r')">Reset</button>
<script type="text/javascript">
const FPS = 30;
var imagePosX = 90;
var imagePosY = 143;
var imageRot = 0;
var image = new Image();
image.src = "sample.jpg";
var canvas = null;
var context2D = null;
window.onload = startup;
function startup(){
canvas = document.getElementById('canvas');
context2D = canvas.getContext('2d');
setInterval(draw, 500 / FPS);
}
function rotate(d){
setInterval(draw(d), 500 / FPS);
}
function draw(d){
if (d=='a'){imageRot -= 10;}
if (d=='c'){imageRot += 10;}
if (d=='r'){imageRot = 0;}
context2D.clearRect(0, 0, canvas.width, canvas.height);
context2D.save();
context2D.translate(imagePosX+(image.width/2), imagePosY+(image.height/2));
context2D.rotate(imageRot * Math.PI / 180);
// optional shadow
context2D.shadowBlur = 15;
context2D.shadowColor = "rgb(0, 0, 0)";
//
context2D.drawImage(image, 0, 0, image.width, image.height, -(image.width/2), -(image.height/2), image.width, image.height);
context2D.restore();
}
</script>
</body>
</html>
Screenshot of how it should look (and looks in chrome/safari/firefox etc):
Screenshot for ie10:
Can anyone help with what is causing this?
IE 10 doesn't support const. Change it to var. That at least will be one reason for it not working.
Also, the debugger (which is not that amazing in IE10) is still your friend. We'll call him 'semi-friend'. Use him. What does he say?
I just started HTML5. I have a problem making a line following the mouse. It works if I don't clearRect( if I remove the line context.clearRect(0, 0, canvas.width, canvas.height);). Any ideea? I attached the code. Thanks
<html>
<head>
<title>Test</title>
</head>
<body>
<canvas id="myCanvas" width="1000" height="600" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
window.onload = function()
{
};
function captureMousePosition(evt)
{
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
context.strokeStyle = 'rgba(0,153,255,0.4)';
context.beginPath();
context.moveTo(0,0);
context.lineTo(evt.x, evt.y);
context.stroke();
}
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = captureMousePosition;
</script>
</body>
context.clearRect(0, 0, canvas.width, canvas.height);
Will clear the complete canvas, thus erasing the line that was on the canvas so far.
One solution is to clear the canvas only once before you start drawing. For example, clear the canvas at the window.onLoad() event, and then only clear again when you start a new drawing.
A second solution would be to store every mouse movement in a long array and redraw that complete line every frame.
edit: update with regard to your clarification below. The code doesn't work due to a syntax error in the clearRect code. You use 'canvas' which is not defined.
context.clearRect(0, 0, c.width, c.height);
does the trick!
I have created a jsFiddle for your problem. To me the problem was in evt.x and evt.y, they were undefined. I have pasted my own functions to get mouse coordinates. You can use a simple way but this is the most reliable way.
http://jsfiddle.net/g9xQ2/