JavaScript - Canvas Fun

I just cant wrap my mind around canvas. As far as I can tell theres no logical reason as to why the code would not work. Could someone take a look at it and possibly figure out whats wrong?

I'm trying to intialize and draw a canvas with a simple image. I have the functions in a custom namespace in javascript. I am also using Jquery

Code:

var birdr = new Image();
var birdl = new Image();

$(document).ready(function(){

if(Modernizr.canvas){
   var c = document.createElement('canvas');

   LK.animLoad();

   document.getElementById('backg-canvas').appendChild(c);

   $('canvas').attr({'width':'500','height':'500','id':'canvas'}); 

   var context = LK.returnCanvas();
   context.drawImage(birdl, 400,487,10,10);
}


});

var LK = {
	birdx: 400, //unused (lets just get it to draw the image first :\)
	birdy: 487, //unused
	animLoad: function(){
		birdl.src = "images/bird2.png";
		birdr.src = "images/bird.png";
		//alert(birdl);
		//alert(birdr);
	},
	returnCanvas: function(ca){
		var b_canvas = LK.getCanvas();
		var b_context = b_canvas.getContext('2d');
		return b_context;
	},
	getCanvas: function(){
		var a_canvas = document.getElementById('canvas');
		//alert(a_canvas);
		return a_canvas;
	}

}

Any help would be greatly appreciate thanks.

Btw safari web inspector indicates the canvas is getting properly created and appended to the container div. So that all works fine.

Code:

<form>
  <input  id="a" size=4 name="neg" placeholder="1st Screen size in inch">
  <input  id="b" size=4 name="hoyr" placeholder="2nd Screen size in inch">
  <input type="submit" value="GO!" onclick="getValue()">
</form>
</div>


<canvas id="MyCanvas" width="1000" height="1000"></canvas>

<script type="text/javascript">
function getValue()
{
	var x = document.getElementById("a").value;
    var y = document.getElementById("b").value;

var aWidth;
var aHeight;
var bWidth;
var bHeight;


var c= document.getElementById("MyCanvas");
var ctx= c.getContext("2d");

ctx.fillStyle="#4AA02C";
ctx.fillRect(0,0,x,y);
}

Here, it draws canvas then disappears immediately.

not sure if this is the right place to ask canvas questions, but if it is, i'm trying to program a game like air hockey (with some twists). it works pretty well now but the table is viewed from overhead, and i would prefer to show the game from the player's perspective, as in the pic, without having to rewrite my existing code. anyone know of any js libraries or formulas which can accomplish this?

So I'm creating a game and decided to use a canvas for the map. The map is a big pictures 500kb+ (6400x6400px) and the canvas size is 320x320 so I am displaying only part of the image at a time and have the page reload on button click for database purposes.

What I'd like help with is performance. Currently it's taking a few secs to reload every time and it seems that it causes some cpu strain (can't switch tabs while loading).

Could I stop the canvas from reloading the image each time the page is reloaded and if so then how?
Can I make the canvas only load a part of the image, if so then how?

If neither is possible any tips, solutions how to solve the performance issues?

I made a graphing calculator using canvas in javascript. It's pretty simple as of right now. I was hoping you guys could take a look and tell me what types of things I should add. Some I'm already looking into: customizable x-min, x-max, etc., plotting more than one function on the same graph. It supports sin(), cos(), tan(), pi, e, sqrt(), ln(), abs(), acos(), asin(), atan(). Exponents can be written as b^e. Please give me some suggestions.

http://jazzothegreat.com/graph.html

Thanks,
Julian

I found a great little starfield script made with javascript and canvas3d.
however i can't for the life of me figure out how to implement a background image inside the canvas. is there some command that tells it to use some feature of canvas, that if otherwise not called, won't allow normal graphics? his whole starfield is generated with a search engine form , and appears to just use a text period to represent stars. here's a link to his script:
http://seb.ly/demos/canvas3d/canvas3d2.html

how do i get a background image in that? or is it impossible?

i tried putting it in the body tag, but it just flashed the background image on the screen for a half a second and then went back to showing only the black background. i tried removing the background body color and replacing it with only background-image ccs, same problem. i tried div positioning it, but the div just covered up the starfield.

i want to transfrom image like the picture below using canvas,it seems simple but i find no way to do , can anyone give me some ideas?

( left side is the source)

Hi there!
I found this code, in reply to someone's problem, on this forum.
I have altered it to my own needs, as it's an excellent piece of code.
However, I would like it to run under HTML5. I believe I need to add
"canvas" code to do the same??
I have already changed the doctype! HTML heading etc.,
Can anyone help?
Many, many thanks!!

Code:

<!doctype html>
<head>
<meta charset=UTF-8" />
<title>Crazy Rally - France</title>
<script type="text/javascript">
var frames = new Array();
	
//load frames into array
for(var i = 1; i < 417; i++){
	frames[i] = new Image(480,320);
	frames[i].src = "track" + i + ".png";
}

//playback
var currentFrameNumber = 1;
var fps = 30; // frames / second
const speed = 1000 / fps; // milliseconds
//var speed = 33;
      
function nextFrame( )
{
      	document.getElementById("display").src = frames[currentFrameNumber].src;
	currentFrameNumber = ( currentFrameNumber + 1 ) % frames.length;
       	setTimeout( nextFrame, speed );
}
window.onload = nextFrame;
</script>
</head>
<body>
<img id="display" src="track1.png" width="480" height="320">
</body>
</html>

Hello, Codingforums. I have looked on Google for a solution, done a handful of things, and cannot get my script to draw to the page.

Code:

<html>
<head>
<script type="text/javascript" src="imageFuncs.js"></script>
<script type="text/javascript">

showImages = function() {
	var drawingCanvas = document.getElementById("map");
	// Check the element is in the DOM and the browser supports canvas
	if (drawingCanvas.getContext) {
		var ctx = drawingCanvas.getContext("2d");
		var imageSources = new Array("map.jpg");
		var images = new Array();
		images = loadImages(imageSources);
		
		for (var i = 0; i < images.length; i++) {
			var img = new Image();
			img.src = images[i].src;
			img.onload = function(){
				ctx.drawImage(img,0,0,screen.width,screen.height);
			}
		}
	}
}
</script>
</head>
<body onload="showImages()">
<canvas id="map">Your browser does not support canvases...</canvas>
</body>
</html>

The problem appears on the ctx.drawImage(img,0,0,screen.width,screen.height); line. I read that the drawImage method will not draw the image if the images are not loaded, which is why I tried an onload event for img.

When I run the code the way it is now, I get a attempt to run compile-and-go script on a cleared scope error from Firebug. When I remove the onload event, the script runs without errors. Either way, no image is drawn on the page. Any help?

If it helps, this is the loadImages function that I used to get the array of loaded image objects:

Code:

function loadImages(sources){
    var images = new Array();
    var loadedImages = 0;
    var numImages = 0;
    for (var src in sources) {
        numImages++;
    }
    for (var src in sources) {
        images[src] = new Image();
        images[src].src = sources[src];
    }
	return images;
}

Hi all,
I'm new to Javascript, and having an issue with getInterval. For my programming languages class we have to create a simulation of waves breaking on a shore from above. I've decided to use a canvas object and Javascript for this animation, but am getting stuck on refreshing the frames. Here is the code I have so far:

Code:

var shoreline = new Array();
var waves = new Array();
var canWidth = 600;
var canHeight = 400;
var waveNum = 0;
var count = 0;

function wave() {
	setupShore();
	var canvas = document.getElementById("canvas");
	canvas.setAttribute("width",canWidth);
	canvas.setAttribute("height",canHeight);
	var ctx = canvas.getContext("2d");
	createWave();
	setInterval(update(ctx), 1000);
}
	
function update(ctx) {
	if(waves.length != 0) {
		drawWater(ctx);
		drawShore(ctx);
		drawWaves(ctx);
		updateWaves();	
	}
}

function drawElement(ctx, x, y, width, height, fillcolor) {
	ctx.fillStyle = fillcolor;
	ctx.fillRect(x, y, width, height);
}

function setupShore() {
	for(var i = 0; i <= canWidth/5; i++) {
		shoreline[i] = Math.round(canHeight/5); // + Math.floor(Math.random()*101);
	}
}

function createWave() {
	/*	Wave array setup:
		[ [waveID1, [node1, node2, ..., nodeN]], 
		[waveID2, [node1, node2, ..., nodeN] ] */
	waves.push([waveNum, []]);
	for(var c = 0; c <= canWidth/5; c++){
		waves[waves.length-1][1].push(canHeight);
	}
	waveNum = waveNum + 1;
}

function destroyWave() {
	waves.shift();
}

function drawWater(ctx) {
	drawElement(ctx, 0, 0, canWidth, canHeight, "#336699");
}

function drawShore(ctx) {
	for(var s = 0; s <= shoreline.length; s++) {
		drawElement(ctx, s*5, 0, 5, shoreline[s], "#FFCC00");
	}
}

function updateWaves() {
	for(var u = 0; u < waves.length; u++) {
		var limit = waves[u][1].length;
		for(var v = 0; v < limit; v++){
			var temp = waves[u][1][v]-5;
			waves[u][1][v] = temp;
			if(waves[u][1][v] <= shoreline[v]){
				destroyWave();
			}
		}
	}
}

function drawWaves(ctx) {
	for(var w = 0; w < waves.length; w++) {
		for(var n = 0; n <= waves[w][1].length; n++){
			y = waves[w][1][n];
			drawElement(ctx, n*5, y, 5, 5, "Purple");
		}
	}
}

As you can see, the idea is that each 5-pixel wide node of the shore and wave are stored in arrays so that the position of each node can differ. The wave() function initializes all the required data, and then calls setInterval on update(). The function update() draws the water, shore, and wave, and then updates the wave position node-by-node. Ideally, setInterval would cause this to happen repeatedly, so that the wave would appear to move closer to the shore every 1000ms.

However, this is not the case. It appears as though setInterval is working for one pass of update(), but fails after the first pass. You can tell that this is happening because the wave appears at its starting position, but does not continue to move.

Any idea why this is happening? I read somewhere that setInterval can be broken by one-time functions, but I'm not sure.

If you'd like to see what it's currently doing in a browser, I've hosted it here.

Once I've got this animating properly I can continue my project, but I've hit a roadblock. Thanks in advance for your help, I'm really stuck.

Marcus

I guess canvases like inline width/height instead of css width/height. This solved the issue.

I'm working on a project that uses HTML5 Canvas and I'm having a strange problem with stretching. I noticed it with images and thought my math might have been wrong but then I took everything out and tried drawing a simple 100x100 square and it's completely stretched out at different proportions.



The code for this (small class code)-

Code:

function Canvas(DOMID, F)
{
this.Frame =   null;
this.width =  null;
this.height =  null;
this.zoom =   null;
this.DOM =	null;
this.ctx =   null;
this.offset =  null;
 
//Constructor
 
this.init = function(DOMID, F)
{
  this.DOM =   document.getElementById(DOMID);
  this.width =  $(this.DOM).width();
  this.height =  $(this.DOM).height();
  this.ctx =  this.DOM.getContext("2d");
  this.zoom =  1;
  this.offset =  {x:0,y:0};
  if(F != null)
   this.setFrame(F);
 
  this.onReady();
}
 
//Modifiers
 
this.draw =   function()
{
  //this.ctx.drawImage(image, 0, 0);
  this.ctx.beginPath();
  this.ctx.fillStyle = "#ffffff";
  this.ctx.rect(0,0,100,100);
  this.ctx.closePath();
  this.ctx.fill();
}
this.setFrame =  function(F)
{
  this.Frame = F;
}
//Events
 
this.onReady = function(){}
 
this.init(DOMID, F);
}

The code calling this function is in an interval-

Code:

window.goToCanvas = function()
{
  clearTimeout(playInterval);
  playInterval = setInterval("drawCurrentCanvas()", window.playSpeed);
}
 
window.drawCurrentCanvas = function()
{
  index = window.canvasIndex;
  canvases[index].draw();
}

The page can be found here-

http://micahwilliams...ewer/viewer.php

I'm stumped. I hope someone can see my mistake somewhere.

Hello,

I have this idea, but I wouldn't want to reinvent the wheel if it's already been done. I want to generate perspective grid on canvas depending on browser window size, something like this, but without textures: http://www.123rf.com/photo_2651286_a...rspective.html Do someone of you guys know if some similar script already exists? Or at least some tips on how not to end up writing a 1000 lines script (At this point I would just drop the idea)? All thoughts appreciated.

P.S. even an obscure algorithm would probably suffice, 'cause the main problem I'm struggling with is diminishing size perspective calculations

Hi. I'm writing a script that graphs data in different colors and shapes and I'm encountering two problems:

(1) I can't specify different colors for the graph I'm rendering. If I use fillStyle="red"; then the entire chart becomes red. It seems to use the last color specified as the color for everything on the chart.

(2) The shapes are overlapping in strange ways. The fills are not covering the lines of shapes behind them so it's unclear which shape is in front and which is behind. It's like they aren't being treated as separate shapes but instead one shape where boundaries are unclear. I don't know how else to explain it.

I'm hoping there is some way to put each shape in its own layer. Would I have to use DIV IDs for that or is there a way to keep it all in the script so it's more scalable?

I have make a javascript program that uses HTML canvas and I can't get it to work in Internet Explorer. I tried using excanvas and jqcanvas but had trouble getting them to work. Does anyone know how to do this?

I'm having a problem with the <CANVAS> element in JavaScript.

here's what i'm trying to do:

I need 3 different canvas elements for writing a signature to.
they must all 3 be visible at the same time


My problem that i'm having is that i can't seem to get the code to work which will write to more than one canvas.

here's my code:

Code:

<html>
<head>
<script language="javascript">
function WriteSignature(element, event) 
{
  document.addEventListener("mousemove", PenHandler, true);
  document.addEventListener("mouseup", upHandler, true);

  event.stopPropagation();
  event.preventDefault();
  
  function PenHandler(event) 
  {
    var x = event.clientX;
	var y = event.clientY;
    
    // mouse event goes here
	var canvas1 = document.getElementById("Canvas1");
    var ctx = canvas1.getContext("2d");

    var PenSize = 2;
	
	ctx.fillStyle = "Black";
	ctx.fillRect (x, y, PenSize, PenSize);


    event.stopPropagation();
  }

  function upHandler(event) 
  {
    document.removeEventListener("mouseup", upHandler, true);     
    document.removeEventListener("mousemove", PenHandler, true);
    event.stopPropagation();
  }

}
</script>
</head>

<body>
<Canvas id="Canvas1" Width="400" Height="100" Style="border:2px solid black" onmousedown="WriteSignature(this, event);"></Canvas><br><br>
<Canvas id="Canvas2" Width="400" Height="100" Style="border:2px solid black" onmousedown="WriteSignature(this, event);"></Canvas><br>

</body>
</html>