Menu
I'm a beginner at this and haven't really done any JavaScript before so I hope you can help me. I've made a canvas that lets the user choose a shape and a colour with radio buttons which is then drawn on to the canvas. I've also added a checkbox with an option of adding a gradient to the chosen colour. Here's the program: http://people.dsv.su.se/~caak1743/Canvas/canvas.html
Now I wan't to make it so that the shapes can be dragged and dropped around the canvas area. And I've found a code that I think can be altered to work on my program but I keep getting: TypeError: Cannot call method 'getContext' of null init (anonymous function) for the line:
var ctx = canvas.getContext("2d");
and I have no idea what is wrong or how I can solve it. I've tried looking for similar programs with similar problems but haven't found anything that I can apply here. Here's the code that I'm trying to incorporate with mine:
function init() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
return setInterval(draw, 10);
}
function draw() {
clear();
ctx.fillStyle = "#FAF7F8";
rectangle(0,0,WIDTH,HEIGHT);
ctx.fillStyle = "#444444";
rectangle();
}
function myMove(e){
if (dragok){
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
}
}
function myDown(e){
if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 +
canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop &&
e.pageY > y -15 + canvas.offsetTop){
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
dragok = true;
canvas.onmousemove = myMove;
}
}
function myUp(){
dragok = false;
canvas.onmousemove = null;
}
init();
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;
421
Just correct it to the following:
<script type="text/javascript">
window.onLoad=function(){ init();};
function init() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
return setInterval(draw, 10);
}
function draw() {
clear();
ctx.fillStyle = "#FAF7F8";
rectangle(0,0,WIDTH,HEIGHT);
ctx.fillStyle = "#444444";
rectangle();
}
function myMove(e) {
if (dragok) {
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
}
}
function myDown(e) {
if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 +
canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop &&
e.pageY > y -15 + canvas.offsetTop) {
x = e.pageX - canvas.offsetLeft;
y = e.pageY - canvas.offsetTop;
dragok = true;
canvas.onmousemove = myMove;
}
}
function myUp() {
dragok = false;
canvas.onmousemove = null;
}
init();
canvas.onmousedown = myDown;
canvas.onmouseup = myUp;
</script>
This should work. The problem is canvas element need to be ready to run the script. Since the <script> in <head> section runs before loading the <canvas> it gives the error.
57
I found two solutions. The first is to add jquery to you page and then there is no need for using in-html js by wrapping the whole js code into
$(document).ready(function() { Your code here });
31
You just need to do to that to get rid of the error. Just add the canvas before the script and always place your script at the end.
<body>
<canvas id="ca"></canvas>
<script type="text/javascript">
var ca = document.getElementById("ca");
var co = ca.getContext("2d");
// whatever your code
</script>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
