I'm trying to write something that makes the different iterations of the cantor set. I copied and deleted some of my code and I don't understand why I am getting this undefined error.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
}
</style>
</head>
<body onload="startGame()">
<script>
//var n=10;
function startGame() {
sheet.start();
}
var sheet = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 726;
this.canvas.height = 680;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
}
}
ctx = sheet.context;
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.stroke();
</script>
</body>
</html>
But I had an example of some code very similar that it won't let me post because it says its mostly code. But some help would be appreciated because this ctx undefined is an error I get a lot and I'm not really sure what it means. I've always used it to draw things on the canvas and never concerned myself with learning what it meant.
Short answer
ctx is undefined because the object sheet doesn't have a property called context.
Thus ctx = sheet.context; will fail.
A bit longer answer
With
var sheet = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 726;
this.canvas.height = 680;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
}
}
you're declaring an object with two properties: canvas and start. As soon as you invoke the start() function on the object, it tries to set the width of it's canvas property to 726 - problem is, sheet doesn't call it's own property canvas before so document.createElement("canvas") won't ever execute.
The fix is simple: set canvas to undefined initially and create the actual canvas element inside the start function. Nevertheless you still won't have a context property so add it to the sheet object too.
Here's an example:
var sheet = {
canvas: undefined,
context: undefined,
start: function() {
this.canvas = document.createElement("canvas");
this.canvas.width = 200;
this.canvas.height = 200;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
}
}
sheet.start();
var ctx = sheet.context;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.stroke();
Related
Hi everyone and thanks for trying to help me ..
I'm trying to create a tiny car game in javaScript, but i actually can't print an image ...
Here's my JS code :
// Parametters
const canvasWidth = 500;
const canvasHeight = 500;
const carLength = 60;
const carWidth = 30;
const canvas = document.getElementById('canvas');
canvas.width = canvasWidth;
canvas.height = canvasHeight;
const context = canvas.getContext('2d');
drawAll();
function drawAll() {
console.log('draw canvas background');
context.fillStyle = 'green';
context.fillRect(0, 0, canvasWidth, canvasHeight);
drawCar();
}
function drawCar() {
let image = new Image();
image.src = 'assets/images/car_orange.png';
context.drawImage(image, 200, 200, carLength, carWidth);
}
and here's the html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="assets/images/pageIcon/pageIcon.ico" type="image/x-icon" />
<title>CrossingCars</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="drinving_environment.js"></script>
</body>
</html>
the mistake is that my code don't print the image as drawCar() function should do, but if I type each line of code separately in my console it works ...
before console use
after console use
Because your image content isn't loaded yet. You should wait until your image is loaded.
Please refer to this answer here
This issue is always happening on canvas.
...
function drawCar() {
let image = new Image();
image.src = 'assets/images/car_orange.png';
image.onload = function() {
context.drawImage(image, 200, 200, carLength, carWidth);
}
}
...
I am trying to program a game in html and javascript, for this I decided to use a canvas, as it will make the development easier. However, when I try to implement another object into the canvas, the code seems to break, I have been fiddling with the code, in order to see the issue, however, I have had no success so far. The code can be found below:
<!DOCTYPE html>
<html>
<head>
<Title>Game Prototype 1</Title>
</head>
<body onload= "startGame()">
<canvas id="canvas"
style =
"border:1px solid #000000;
padding-left: 0;
padding-right: 0;
margin-top: 65px;
margin-left: auto;
margin-right: auto;
display: block;">
</canvas>
<script>
var character;
function startGame(){
gameArea.start();
character = new character(30, 30, "red", 10, 120);
}
var gameArea = {
canvas:
document.getElementById("canvas");
start : function() {
this.canvas.width = 1000;
this.canvas.height = 800;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas,document.body.childNodes[0]);
}
function character(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
ctx = gameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.width, this.height, this.x, this.y);
}
</script>
</body>
</html>
The output of the code is this:
At this point I am no longer sure whether the issue is which the character variable, and hence the character is not being displayed, or with the canvas, as the canvas has incorrect dimensions, I am not entirely sure why the canvas changes the dimensions (if the rectangle displayed on the screen is the canvas). This is what I mean by the code breaking.
You have some syntax errors in the gameArea object. (A } was missing, and in Javascript you use , instead of ; to separate members within an object.)
I recommend using the browser console to spot such issues. Here is your code with the object fixed:
<!DOCTYPE html>
<html>
<head>
<Title>Game Prototype 1</Title>
</head>
<body onload= "startGame()">
<canvas id="canvas"
style =
"border:1px solid #000000;
padding-left: 0;
padding-right: 0;
margin-top: 65px;
margin-left: auto;
margin-right: auto;
display: block;">
</canvas>
<script>
var character;
function startGame(){
gameArea.start();
character = new character(30, 30, "red", 10, 120);
}
var gameArea = {
canvas: document.getElementById("canvas"),
start: function() {
this.canvas.width = 1000;
this.canvas.height = 800;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas,document.body.childNodes[0]);
}
}
function character(width, height, color, x, y) {
this.width = width;
this.height = height;
this.x = x;
this.y = y;
ctx = gameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.width, this.height, this.x, this.y);
}
</script>
</body>
</html>
Did this solve your problem or were you expecting something else to happen?
I have some HTML and Javascript code that draws a 2D canvas in the page. In the task manager, I can see memory increasing rapidly until the web page freezes.
Please let me know how I can prevent memory leaks or provide me with some alternative code that is able to draw canvas on the browser without creating such leaks.
function setup() {
// insert setup code here
}
function draw() {
// insert drawing code here
var canvas = document.createElement('canvas');
canvas.id = "CursorLayer";
canvas.width = 1224;
canvas.height = 600;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";
document.body.appendChild(canvas);
var c2 = canvas.getContext('2d');
var centerX=canvas.width/2-100;
var centerY=canvas.height/2-100;
c2.fillStyle = '#696969';
c2.beginPath();
c2.moveTo(centerX, centerY);
c2.lineTo(centerX+200,centerY);
c2.lineTo(centerX+200, centerY+200);
c2.lineTo(centerX, centerY+200);
c2.closePath();
c2.fill();
// adding source location
var ctx = canvas.getContext("2d");
ctx.fillStyle = '#008000';
ctx.beginPath();
ctx.arc( 20, canvas.height-20, 10, 0, 2 * Math.PI);
ctx.stroke();
ctx.closePath();
ctx.fill();
// adding destination location
var ctx1 = canvas.getContext("2d");
ctx1.fillStyle = '#f00';
ctx1.beginPath();
ctx1.arc( canvas.width-20, 20, 10, 0, 2 * Math.PI);
ctx1.stroke();
ctx1.closePath();
ctx1.fill();
}
<!DOCTYPE html>
<html>
<head>
<title>Robot Path Planning</title>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<script src="../p5.min.js"></script>
<script src="../addons/p5.dom.min.js"></script>
<script src="../addons/p5.sound.min.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>
Browser
Memory consumption
Apparently your code is creating a new canvas entity for each draw call and this doesn't make sense.
You should instead create the canvas only once and then just do drawing on it in the draw call. If you need to clear the previous frame you can just reset the width/height properties or call clearRect.
This is my script code..
<body onload= "startGame()">
<script>
var Earth;
var Mercury;
var Venus;
function startGame() {
Earth = new component(152, 183, 'earth.png', 800, 75);
Mercury = new component(122,151, 'mercury.png', 300, 400);
Venus = new component(152, 183, 'venus.png', 520, 240);
GameArea.start();
}
var GameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 1000;
this.canvas.height = 642;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
//make game pieces
function component(width, height, color, x, y) {
this.type = "image";
this.image = new Image();
this.image.src = color;
this.width = width; this.height = height;
this.x = x; this.y = y;
this.update = function() {
ctx = GameArea.context;
ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
}
}
function updateGameArea() {
GameArea.clear();
Earth.update();
Mercury.update();
Venus.update();
}
</script>
</body>
The code is when browser open, startGame() function is start.
I draw canvas, and show planets on the canvas.
Please refer to the image.
This is when javascript on running image.
Their has a Earth, Mercury, Venus.
That planet is all object....If i thinks...
I want to click event when users click on "Earth" object..
But I don't know how to do that....
What should I refer to?
Please advice to me..! Thanks.
You can't, really. When you're drawing on a canvas you're essentially drawing one big bitmap image. The shapes you draw get added to it and that's it. They're not actually objects.
You have two options:
Catch the click event from the canvas element, get the mouse coordinates and use that to infer which object was clicked.
Use a library like EaselJS. It's sort of an API around the canvas that makes working with it much easier. It will allow you to attach click handlers to the objects on the canvas.
You're basically going to have to track where your Planets are on the canvas, then set up an event listener on the canvas itself. From there you can take the coordinates of the click event and go through all your Planets to test.
HTML:
<form id="myCanvas" ... >
</form>
Get canvas element:
var Earth = document.getElementById('myCanvas');
To add a click event to your canvas element, use...
Earth.addEventListener('click', function() { }, false);
Check this example with informations about #Brother Woodrow said
I am trying to make a full screen, responsive image on Canvas. I believe I have the sizing figured out, but it isn't drawing the image and is instead leaving the canvas blank.
This is the HTML and JavaScript I am currently using:
<canvas id="MainCanvas"></canvas>
<script>
var canvas = document.getElementById("MainCanvas");
var context = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var wRatio = canvas.width / imageObj.width;
var hRatio = canvas.height / imageObj.height;
var ratio = Math.min (wRatio, hRatio);
var imageObj = new Image();
imageObj.onload= function() {
context.drawImage(imageObj, 0, 0, canvas.width, canvas.height,imageObj.width*ratio, imageObj.height*ratio);
};
imageObj.src="Local File.jpg";
</script>
CSS:
canvas{
border: 5pt solid black;
position: relative;
height: 100%;
width: 100%;
}
Any help is greatly appreciated.
First off, good job on the minimal example. When I ran it in jsFiddle, here's what I got in my javascript console.
Uncaught TypeError: Cannot read property 'width' of undefined
Looking at your code, i noticed that it was trying to reference the width and height of the image before it had loaded. I put that code inside your onLoad function and that error was corrected. Next I got this error:
Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': Valid arities are: [3, 5, 9], but 7 arguments provided.
Seeing that, I looked up CanvasRenderingContext2D on MDN. That showed me what it required, and I added a 0,0 for the dx, dy values. This is completely wrong of course, but it at least gets the image to render (jsfiddle link if the below example doesn't work correctly):
var canvas = document.getElementById("MainCanvas");
console.log(canvas);
var context = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var imageObj = new Image();
imageObj.onload= function() {
var wRatio = canvas.width / imageObj.width;
var hRatio = canvas.height / imageObj.height;
var ratio = Math.min (wRatio, hRatio);
context.drawImage(imageObj, 0, 0, canvas.width, canvas.height,0,0,imageObj.width*ratio, imageObj.height*ratio);
};
imageObj.src="//placehold.it/500";
html, body {
height: 100%;
}
canvas{
border: 5pt solid black;
position: relative;
height: 100%;
width: 100%;
box-sizing: border-box;
display:block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<canvas id="MainCanvas"></canvas>