I'm trying to create a simple html 5 canvas however it looks as if my JavaScript is not returning the right thing:
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<script>
var c = document.getElementById("myCanvas");
console.log(c);
// var ctx = c.getContext("2d");
// ctx.fillStyle = "#FF0000";
// ctx.fillRect(0,0,150,75);
</script>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
</body>
</html>
My console log returns a null even though that element exists. I have checked and my browser does support 2d graphics and canvas.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById("myCanvas");
console.log(c);
</script>
NOTE: First you have to have DOM element in your script, unless you aren't aware of that DOM is already fully loaded. Nonetheless of DOM element position in your script you can write JavaScript as following:
window.onload = function(){
// here goes your code
};
Your dom(canvas) is not ready for your script, put your code inside window.onload
window.onload = function (){
//this scripts runs when your canvas is ready
var c = document.getElementById("myCanvas");
console.log(c);
}
It's because your canvas isn't in the DOM yet.
Wrap it in a window.onload
window.onload = function(){
var c = document.getElementById("myCanvas");
console.log(c);
}
Related
here's the code:
HTML:
<body onload="initializeMap()">
<div id="map_canvas" style="width:100%; height:100%; z-index:1"></div>
<canvas id="control" style="width:100%; height:100%; z-index:2">Does Not Support Canvas Element</canvas>
</body>
Javascript:
<script type="text/javascript">
var canvas = document.getElementById('control');
var context = canvas.getContext('2d');
function draw(){
context.font = "bold 12px sans-serif";
context.fillText("x", 248, 43);
}
</script>
the draw function is called after initialization of the google map so the DOM should have already loaded by then, correct? What might have I done incorrectly?
The DOM has already been loaded when the draw-function is called, that is correct.
But the var canvas = document.getElementById('control');-line is evaluated before that, because it is not in the draw-function. It is executed immediately in the <head> of the document BEFORE the elements have been rendered.
I would suggest you change your init function to something like that
var canvas,context;
function initializeMap() {
canvas = document.getElementById('control');
context = canvas.getContext('2d');
}
If your javascript is loaded prior to your body then canvas will be undefined because the browser hasn't loaded/rendered it yet.
I am getting the following Error
Error: Uncaught TypeError: Cannot read property 'innerHTML' of null
at script.js:1
I have tried everything I could think of but nothing works.
var canvas = document.getElementById("can").innerHTML;
var ctx = canvas.getContext("2d");
ctx.fillStyle = ("green");
ctx.fillRect(0, 0, 300, 200);
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<body>
<script src="script.js"></script>
<!-- Canvas -->
<canvas id="can" width="300" height="200" style="border:4px solid red;">
</canvas
</body>
</html>
Okay there are two serious errors.
You're trying to get the element before the DOM is fully loaded. Therefore the canvas note is not reachable. See addEventListener
and DOMContentLoaded.
Remove .innerHTML. getContext appends on the node not on the content.
document.addEventListener('DOMContentLoaded', function() {
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 300, 200);
});
<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
</head>
<body>
<script src="script.js"></script>
<!-- Canvas -->
<canvas id="can" width="300" height="200" style="border:4px solid red;">
</canvas>
</body>
</html>
1. Script error when using canvas
Use var canvas = document.getElementById("can");
Not var canvas = document.getElementById("can").innerHTML();
See W3C - Canvas
2. Add an event listener when the document is ready, then execute your script
See W3C - DOM Event Listener example
function doSomething() {
var canvas = document.getElementById("can");
var ctx = canvas.getContext('2d');
/*
another scripts...
*/
}
window.addEventListener('onload', doSomething, false);
There are two things.
First, you don't need .innerHTML as other answers stated.
Second, you either have to run you script at the window load event like so:
window.addEventListener('load', function () {
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
ctx.fillStyle = ("green");
ctx.fillRect(0, 0, 300, 200);
});
Or you should load the javascript after the canvas tag.
I was trying to execute this code in webmatrix. But don't know why I'm not getting result. I'm getting original image but not in canvas. Also I'm new to webmatrix.
Here is my code:
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="scream" src="happy.png" alt="The Scream" width="220" height="277">
<p>Canvas</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
</body>
</html>
This is not a problem concerning the Web Pages framework and WebMatrix, but the Canvas API.
Before to instantiate the drawImage() method the code must wait that the image is loaded. You can accomplish this by using the onload property of the image object as in the example that follows:
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
img.onload = function () {
ctx.drawImage(img, 10, 10);
}
</script>
My Code is like this
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="578" height="200" style="display:none;"></canvas>
<img id="canvasImg" onclick="myFunction()" alt="Right click to save me!">
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function myFunction() {
var c = document.getElementsByTagName("canvas");
// save canvas image as data url (png format by default)
var dataURL = c.toDataURL();
// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById('canvasImg').src = dataURL;
}
</script>
</body>
</html>
When i click on canvasImg its throwing an error
Uncaught TypeError: Object #<NodeList> has no method 'toDataURL'
I have made a fiddle here
Can any one point out whats going wrong?
DEMO
document.getElementsByTagName returns array of elements objects, and no array objects have method toDataUrl
instead of this
var c = document.getElementsByTagName("canvas");
use
var c = document.getElementsByTagName("canvas")[0];
function myFunction() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var img = document.getElementById("canvasImg");
context.drawImage(img, 0, 0);
}
I am trying to draw a canvas created through javascript on another canvas. But it is not working for me,
Here is my code,
<!DOCTYPE HTML>
<html>
<head>
</script>
<script>
window.onload = function(){
var can1 = document.createElement('canvas');
can1.width = 150;
can1.height = 140;
can1.style.cssText = 'top:2px;left:2px;border:2px solid black;';
var ctx1 = can1.getContext('2d');
var img=new Image();
img.src="images/211.jpg"
ctx1.drawImage(img,0,0);
var can = document.getElementById("c");
var ctx = can.getContext('2d');
ctx.drawImage(can1,0,0);
var canvas = document.getElementById("c");
window.open(canvas.toDataURL());
}
</script>
</head>
<body >
<canvas id="c" style = "position:absolute;top:150px;width:250px;height:350px;left:500px; border:2px solid black;"></canvas>
</body>
</html>
I think the problem was that, when you were trying to drawImage that image into the canvas, image was not ready. so if u do this it works perfectly:
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script>
window.onload = function() {
var imageObj = new Image();
imageObj.src = "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg";
var dynamicCanvas = document.createElement("canvas");
var dynamicContext = dynamicCanvas.getContext("2d");
dynamicCanvas .height="400";
dynamicCanvas.width="578";
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
imageObj.onload = function() {
dynamicContext.drawImage(imageObj, 69, 50);
context=context.drawImage(dynamicCanvas,69,50);
window.open(canvas.toDataURL());
};
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
</body>
</html>
and you can adjust the height and width of the dynamic canvas.
if you remove that window.open statement, its perfect.
but there is a problem with canvas.toDataURL()
when you try to do canvas.toDataURL() for a local file, it gives a security error (if you inspect it through google chrome) i.e.
Uncaught Error: SECURITY_ERR: DOM Exception 18
you can know more about this error : here
(see if you are getting this error). anyways, the root cause is sorted out, and there's a new problem now altogether :D..anyways better luck!!
The problem with an incorrect image display using the original code of MJQ is that he doesn't stated the size of the second canvas directly through attributes - only through style. Thus browser created a canvas of default size (300x150 for FF) and then stretched it to 250x350.
So the following modification will solve the image display:
<canvas id="c" width="250" height="350" style = "position:absolute;top:150px;width:250px;height:350px;left:500px; border:2px solid black;"></canvas>
Maybe this will help someone in the future.
what are you taking about? your code is working.
(If am getting your question correctly) I added following lines after
can1.style.cssText='border:2px solid black;';
:
var ctx1 = can1.getContext('2d');
ctx1.rect(50, 50, 500, 500);
ctx1.fillStyle = '#8ED6FF';
ctx1.fill();
and upon execution, i see a beautiful rectangle inside!!
are you using html5 supporting browser??