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.
Related
I'm trying to build a simple tool like meme generator using HTML5 canvas. Is it possible to use local fonts on the mobile phone (this is target towards mobile) in the canvas?
#Akxe correctly answers that you can .fillText using local fonts to draw on html5 canvas.
It's also common to pull necessary font(s) from various internet font hosts.
Here's an example of how to download a web font & draw with it on html5 canvas:
// load google font == Monoton
WebFontConfig = {
google:{ families: ['Monoton'] },
active: function(){start();},
};
(function(){
var wf = document.createElement("script");
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js';
wf.async = 'true';
document.head.appendChild(wf);
})();
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
function start(){
ctx.font = '40px Monoton';
ctx.textBaseline = 'top';
ctx.fillText('Monoton Font', 20, 10);
var width=ctx.textMetrics('No').width;
console.log(width);
}
body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}
<h4>"Monoton" font drawn on canvas is a downloaded web font</h4>
<canvas id="canvas" width=400 height=100></canvas>
You can specify any font to the canvas. You should be able to type anything that CSS would accept
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "Arial 30px";
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!
<!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");
:)
I'm trying to draw the video feed (frames) into a canvas every 250ms, but the canvas doesn't get any image data. This is what I have done so far, I can get video feed from the webcam, please advice if I'm doing anything wrong in the code below:
<div>
<video id="live" width="320" height="240" autoplay style="border:5px solid #000000"> </video>
<canvas width="320" id="canvas" height="240" style="border:5px solid #000000"> </canvas>
<button id="btn" onclick="start()">Start</button>
</div>
<script>
var video = document.getElementById("live");
var canvas = document.getElementById("canvas");
var ctx = canvas.get()[0].getContext('2d');//changed this line to "canvas.getContext('2d')".
function start() {
navigator.webkitGetUserMedia({video:true}, gotStream, function() {});
btn.disabled = true;
}
function gotStream(stream) {
video.src = webkitURL.createObjectURL(stream);
}
timer = setInterval(
function () {
ctx.drawImage(video, 0, 0, 320, 240);
}, 250);
</script>
Any help is appreciated, I'm trying to analyse if the image received on the canvas are good to be streamed to a web server or something similar.
Changed the line from
var ctx = canvas.get()[0].getContext('2d');
to
var ctx = canvas.getContext('2d');
solved the issue. Thanks.
I want to load a PNG image encoded in Base64 to canvas element. I have this code:
<html>
<head>
</head>
<body>
<canvas id="c"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
data = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC";
ctx.drawImage(data, 0, 0);
</script>
</body>
</html>
In Chrome 8 I get the error: Uncaught TypeError: Type error
And in Firefox's Firebug this: "The type of an object is incompatible with the expected type of the parameter associated to the object" code: "17"
In that base64 is 5x5px black PNG square that I have made in GIMP and turn it to base64 in GNU/Linux's program base64.
By the looks of it you need to actually pass drawImage an image object like so
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var image = new Image();
image.onload = function() {
ctx.drawImage(image, 0, 0);
};
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC";
<canvas id="c"></canvas>
I've tried it in chrome and it works fine.
Jerryf's answer is fine, except for one flaw.
The onload event should be set before the src. Sometimes the src can
be loaded instantly and never fire the onload event.
(Like Totty.js pointed out.)
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var image = new Image();
image.onload = function() {
ctx.drawImage(image, 0, 0);
};
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC";
....