On the W3 Schools HTML5 Canvas Image Page, they use an <img> tag on the page before they load their canvas. Their code is below.
<p>Image to use:</p>
<img id="scream" width="220" height="277" src="img_the_scream.jpg" alt="The Scream">
<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
}
</script>
I have a map (as an image) that I have loaded on a server that I need to use, but I cant find a way to only have the one image on the canvas. For example...
The left one is the image that I am using, but I need it for the one on the right (which is a canvas) to work.
Any tips?
Use JS to create an image
If you know the path to the image, or can provide it, you can use the following to create an image. It's important to note the image does take time to load and you cannot use the image successfully before it is loaded.
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.createElement("img");
img.onload = function() {
ctx.drawImage(img, 10, 10);
}
// triggers onload event (after it loads of course)
img.src = "//via.placeholder.com/350x150";
}
<p>Canvas:</p>
<canvas id="myCanvas" width="370" height="170" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
I don't understand why requestAnimationFrame in my code work only for one element. I want animate both borders... my code in codepen -> http://codepen.io/zey_ser/pen/RPXovp
<div>
<div id="valueForAnimation" style="display:none;">10</div>
<canvas id="myCanvas" width="100"
height="100"></canvas>
</div>
<div>
<div id="valueForAnimation2" style="display:none;">85</div>
<canvas id="myCanvas2" width="100"
height="100"></canvas>
</div>
<button onclick="stop()">Stop animation</button>
animatedBorders('#myCanvas','valueForAnimation');
animatedBorders('#myCanvas2','valueForAnimation2');
///////////////////////////////////////////////////////////////////////////////////////////////
function animatedBorders (selector,selectorValue){
canvas = document.querySelector(selector);
ctx = canvas.getContext('2d');
...
////////////////////
drawRect();
ID = requestAnimationFrame(animationLoop);
drawText();
////////////////////
function drawRect(){
...
}
function drawLine(){
...
}
function drawText(){
...
}
function animationLoop(){
drawLine();
}
}
You forgot to use var ctx by omiting this you created a variable of window.ctx, the second time your function runs the first ctx is over written with the second, and that is why only the second one runs.
This is what the first 3 lines of animatedBorders function should look like:
function animatedBorders(selector, selectorValue) {
canvas = document.querySelector(selector);
var ctx = canvas.getContext('2d');
with the only noticeable change, the addition of var before ctx
I have been having some trouble with displaying a sprite sheet on a simple canvas. For debugging purposes I have taken the code out from my main code so that I can work on just one small file. The sprite sheet loads up next to the canvas but the canvas does not display the sprite itself.
Any help is much appreciated. Thanks
<canvas id="canvas" width="800" height="36" style="border:1px solid" onload="draw_hello()" ></canvas>
<img id="helloSprites" src="Tux-Hello.png">
<script>
//hello sprite
var x=0;
var y=0;
var f=0;
var w=32;
var h=32;
var mycanv=document.getElementById("canvas");
var ctx=mycanv.getContext("2d");
//helloImage.src = "images/Tux-Hello.png";
//var helloImage = new Image();
var hello=document.getElementById("helloSprites");
function draw_hello() {
setInterval(drawHello,200);
}
function drawHello() {
ctx.fillStyle="#292";
ctx.fillRect(0,0,mycanv.width, mycanv.height);
ctx.fillStyle="#aaa";
ctx.fillRect(0,25,mycanv.width, mycanv.height);
if (x>=(mycanv.width)) {
x=0;
}
x+=2;
f++;
// draw the car
if (f==2) {
f=4;
}
if (f==6) {
f=0;
}
ctx.drawImage(hello, w, f*h, w, h, x, y, w, h);
}
</script>
Attach your onload to the body element and not the canvas element.
You're probably calling onload--and therefore calling draw_hello() before the img element is fully loaded.
I'm trying to place the textarea content into canvas but getting undefined message instead on the canvas block. successfully loaded image on it but not textarea. i tried in many ways to solve this but could not solve. please help me. Thanks in Advance.
html code
<textarea>praise the lord</textarea>
<div > <button class="wrapper1" id="saveid" onclick="sharee(0)">SAVE </button> </div>
<img id="scream" src="a.jpg" alt="The Scream" width="70" height="70"><p>Canvas:</p>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
javascript code
function sharee() {
var val = document.getElementById("myCanvas");
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
textArea = document.getElementsByTagName("textarea")[0],
ctx.font="30px Arial";
ctx.drawImage(img, 40, 40);
ctx.fillText(textarea, 40,60);
setTimeout(function(){
window.savephotoplugin(canvas,"image/png",device.version,function(val){
//returns you the saved path in val
alert("Photo Saved: " + val);
});
}, 0)
You are trying to draw the textarea element it self as text which won't work.
Try this modification:
ctx.fillText(textArea.value, 40, 60);
and I'm not sure if this is just a typo in the post, but this line needs to be:
var textArea = document.getElementsByTagName("textarea")[0]; //no comma at end
I have a project creating layouts and i have decided to do it with canvas element.I created a function that takes 4 args.
function fillArc(camvas,x,y,w,h)
{
canv.beginPath();
var canv = document.getElementById("camvas");
var context = canv.getContext('2d');
context.strokeStyle="#FFFFFF";
context.moveTo(x+5,y);
context.lineTo(w-5,y);
context.quadraticCurveTo(w,y,w,y+5);
context.lineTo(w,h-5);
context.quadraticCurveTo(w,h,w-5,h);
context.lineTo(x+5,h);
context.quadraticCurveTo(x,h,x,h-5);
context.lineTo(x,y+5);
context.quadraticCurveTo(x,y,x+5,y);
context.stroke();
canv.closePath();
}
I have several canvas elements so i want to create this border-radius box in different areas.I assumed that a call like:
<canvas width="500" height="500" id="canvaslayouts">
</canvas>
<script>
fillArc(canvaslayouts,10,10,50,50);
</script>
But this doesn't seem to work.Can anyone point my mistake please.
jsFiddle Demo
Place your function and the call to it in a script element
Pass in a string which matches the id of the canvas you wish to draw on
Use the context, not the canvas, to access the drawing API
<script>
function fillArc(camvas,x,y,w,h)
{
var canv = document.getElementById(camvas);
var context = canv.getContext('2d');
context.beginPath();
context.strokeStyle="#ffffff";
context.moveTo(x+5,y);
context.lineTo(w-5,y);
context.quadraticCurveTo(w,y,w,y+5);
context.lineTo(w,h-5);
context.quadraticCurveTo(w,h,w-5,h);
context.lineTo(x+5,h);
context.quadraticCurveTo(x,h,x,h-5);
context.lineTo(x,y+5);
context.quadraticCurveTo(x,y,x+5,y);
context.stroke();
context.closePath();
}
fillArc("canvaslayouts",10,10,50,50);
</script>
Putting it in a <script> block should do the trick:
<canvas width="500" height="500" id="canvaslayouts"></canvas>
<script>
fillArc(canvaslayouts,10,10,50,50);
</script>
Also, note that your fillArc() function definition (or any other executable JavaScript that you may have) should also be in a <script> block.
Well, a few things:
You're never using the camvas variable.
You're always refering to #camvas.
You call canv.beginPath() before setting canv to anything.
Your javascript code in the canvas is not in script tags
Your javascript code in the canvas tag calls the function with canvaslayouts as the first parameter. This means you're searching for a variable named "canvaslayouts" and not an ID. Change it to "canvaslayouts" to specify that it's a string to be used in getElementById.
The correct code should be something like this:
function fillArc(camvas,x,y,w,h)
{
//Changed to use the variable instead, and moved it to the start
var canv = document.getElementById(camvas);
canv.beginPath();
var context = canv.getContext('2d');
context.strokeStyle="#FFFFFF";
context.moveTo(x+5,y);
context.lineTo(w-5,y);
context.quadraticCurveTo(w,y,w,y+5);
context.lineTo(w,h-5);
context.quadraticCurveTo(w,h,w-5,h);
context.lineTo(x+5,h);
context.quadraticCurveTo(x,h,x,h-5);
context.lineTo(x,y+5);
context.quadraticCurveTo(x,y,x+5,y);
context.stroke();
canv.closePath();
}
and
<canvas width="500" height="500" id="canvaslayouts">
<script type="text/javascript">
//Use a script container
fillArc("canvaslayouts",10,10,50,50); //Use a string, not a variable
</script>
</canvas>
You need to change the .beginPath() and .closePath() calls so that they're applied to the context, and not to the canvas.
That can of course only be done once you've called canv.getContext().
You also need to:
use the correct ID - you've used "camvas" when it should be the variable with that name
put your JS inside <script> tags
i.e.:
<script>
function fillArc(camvas,x,y,w,h)
{
var canv = document.getElementById(camvas);
var context = canv.getContext('2d');
context.beginPath();
context.strokeStyle="#FFFFFF";
context.moveTo(x+5,y);
context.lineTo(w-5,y);
context.quadraticCurveTo(w,y,w,y+5);
context.lineTo(w,h-5);
context.quadraticCurveTo(w,h,w-5,h);
context.lineTo(x+5,h);
context.quadraticCurveTo(x,h,x,h-5);
context.lineTo(x,y+5);
context.quadraticCurveTo(x,y,x+5,y);
context.closePath(); // NB: close the path before you stroke it
context.stroke();
}
</script>
<canvas width="500" height="500" id="canvaslayouts"> </canvas>
<script>
fillArc("canvaslayouts", 10, 10, 50, 50);
</script>