JavaScript - Canvas Not Drawing My Programmable Sprite

Hi, I was wondering - how can I convert something that a user draws inside canvas? Say, they draw a square, how could I convert that to print "You have drawn a square" - this would be posted to a text file.

Thanks in advance.

Hi Everyone

I am trying to write some code to create an object in JS that contains the x,y coords for a shape i wish to draw. I create the shape, and then in a draw function I draw the shape to the screen from the object I created erlier. Trouble it is does not seem to work :S

have anyone got and ideas?

Code:

var myShape = new newShape(200,200);

function init() {
			
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");	
  return setInterval(draw, 50);
			
} // init

function newShape(x,y){
			
  this.un_X=x
  this.un_Y=y
					
  function drawAll() {
			
    ctx.beginPath();
    ctx.arc(un_X,un_Y,30,0,Math.PI*2,true);
    ctx.closePath();
    ctx.stroke();				
			
  } // drawAll

} // newShape

function draw() {

  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  
  myShape.drawAll();

} // draw

init();

Thanks in advance

Hi,

I am trying to write a script to get my sprite to move to the next row once it reaches the last frame on it's current row.

Here's my attempt so far; in the code below I want bird2 when it reaches frame 3 and spState(1) - this means first row - to switch to spState (2) second row.

Code:

            if ($('#bird2'['current_frame']) == 3 && $('#bird2').spState(1)) {
                $('#bird2').spState(2);
            } else {
                   $('#bird2').spState(1);
            }

Here's the code regarding the spState()

Code:

        spState: function(n) {
            $(this).each(function() {
                // change state of a sprite, where state is the vertical
                // position of the background image (e.g. frames row)
                var yPos = ((n - 1) * $(this).height()) + 'px';
                var xPos = $._spritely.getBgX($(this));
                var bp = xPos + ' -' + yPos;
                $(this).css('background-position', bp);
            });
            return this;

this is from http://www.spritely.net/ you will notice on this site that if you drag the slider to the left the bird sprites change direction, in fact they play the second row of frames.

The reason I want my bird sprite to go automatically to the next row is because I am using video turned into individual frames and a png strip, and I am limited by the max width of png (8192px). see http://www.cranihum.com/ scroll down to see the bird on the rooftop. Each frame in that bird sprite is 80px wide and there are 93 frames. So I would like to include multiple rows to allow me to increase the number of frames. Up to 15 rows will be needed and after the last row it should go back to the first row. Perhaps a switch statement would be better than what I currently have.

I am new to JavaScript and have been trying to pick up clues from http://www.w3schools.com I am very happy to learn and I hope to be prompted and pushed in the right direction. I hope my request is clear, please ask questions if not.

Thank you

Will

Hi

I've set up an html page that contains 3 buttons, which have a sprite rollover effect when hovered over. This is handled by css.

When one of the buttons is clicked - a value is passed to an input field. This is handled by Javascript.

Both of these functions work.

What I would like to do is add a second function when a button is clicked - so that the hover sprite remains selected.

Could anyone tell me how to do this please?

Here is the button code I have:

<button type="button" class="fantasy_button_blue_sprite" id="mcgyver" value="mcgyver" onclick="setHiddenControlValue('option1');">next</button>

Here is the input field that gets populated:

<input type="<?php echo $type;?>" id="fantasy_friend" name="fantasy_friend" value="<?php echo $fantasy_friend; ?>">

This is the javascript I'm using:

<!--
// set the hidden form field when a button is clicked
function setHiddenControlValue(selectedValue) {

document.getElementById("fantasy_friend").value = selectedValue;
parent.document.options_form.their_firstname.value=selectedValue;

}

And this is the sprite css:

.fantasy_button_green_sprite {
background: transparent url("/images/align_page/fantasy_button1.jpg") 0 1px no-repeat;
height:61px;
width:164px;
border:none;
text-indent:-99999px;
cursor: pointer;
margin-top:20px;
}

.fantasy_button_green_sprite:hover {
background: transparent url("/images/align_page/fantasy_button1.jpg") 0 -61px no-repeat;
}

Thanks!

Tom
-->

Hi I'm trying to add a jquery dropdown menu to my navigation bar. My navigation bar is coded properly But I can't figure out how to add a dropown menu to one of my navigation bar's menu items. I have the navigation bar set up as

<div>
<ul id="navbar">
<li id="home"><a href="home.html"><span>HOME</span></a></li>
<li id="about"><a href="#"><span>ABOUT</span></a></li>
<li id="gallery"><a href="#"><span>GALLERY</span></a></li>
<li id="sources"><a href="#"><span>SOURCES</span></a></li>
</ul> <!-- end navbar -->
</div>

and I want to add a two item dropdown menu to the Gallery item. Thanks in advance.

Hey everyone,

I have been practicing using canvas to make designs. My current code below will load the word the user inputs and makes it bounce around the canvas as well as a text spinner. However, whenever the user inputs a second word, the bounce below stops to start a new one and the text spinner messes up.
I was wondering if anyone could help me so when the user inputs another word, that it either reloads a new textspinner or adds another one, as well as just add the word to the canvas without stopped the old one.

Here's my current script.
Thanks already,
Joey

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
var ctx;
var a=0.0;
var as=true;//true a is increasing, false decreasing
var x,y;
var xs = 1;
var ys = 1;
var userWord
var myDiv, t;
var test = 0;
var ds ="";//display string
var sli =0; //spinning letter index;

function init(){
	ctx = document.getElementById("myCvs").getContext("2d");
	userWord = document.getElementById("userWord").value;
	x=Math.floor(Math.random()*801)
	y=Math.floor(Math.random()*601);
	drawText();
	setInterval("onEnterFrame()", 50);
	myDiv = document.getElementById("myDiv");	
	for (i =0; i<=userWord.length;i++){
		ds += "*";
	}
	myDiv.innerHTML =ds;
		textSpin();
}

function textSpin(){
	myChar = randomChar();
	var newString = userWord.slice(0, sli);
	newString +=myChar;
	newString += ds.slice(sli+1, ds.length-1);
	myDiv.innerHTML = newString;
	if (myChar == userWord.charAt(sli)){sli++;}
	if (sli<userWord.length){
		t = setTimeout("textSpin()", 80);
	}
}

function randomChar(){
	var rc = Math.random()*26 + 97; //random lowercase char code
	return String.fromCharCode(rc);
}

function onEnterFrame(){
if(a>1){as = false;}
	if(a<0){as = true;}
	if(as){
		a+=0.01;
	}else{
		a-=0.01;
	}
	if(x>800){xs = -1}
	if(x<0){xs=1}
	if(y>600){ys = -1}
	if(y<0){ys=1}
	x+=10 *xs;
	y+=10 *ys;
	drawText();

}



function drawText(){
	ctx.font =  "20px Times New Roman";
	//ctx.fillStyle= "rgb(256,256,256)";
	//ctx.fillText("Hello", x, y);
	ctx.fillStyle = randomColor();
	ctx.fillText(userWord, x,y);
} 
function randomColor(){
	var r = Math.floor(Math.random()*150)+55;
	var g = Math.floor(Math.random()*256)+150;
	var b = Math.floor(Math.random()*20)+50;
	var a = Math.random();
	return "rgba("+ r+ ","+g+","+b+","+ a+")";
}

//function randomFont(){
//	var s = Math.floor(Math.random()*100) +100;
//	return s; //+ "px Times New Roman";}

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
	background-color:#000;
}
#myDiv {
	color:#FFF;
}
</style>
</head>

<body onLoad=""><center>
<input type="text" id="userWord" value=""> </input><br>
<input type="button" id="enterWord" value="Enter Word" onClick="init()" ></input><br><br>
<div id="myDiv" > </div>
<canvas id="myCvs" width="800px" height="600px" /><br>
<br>
</center>
</body>
</html>

Hi there!

How should I write this - better than it's now - so that when I rotate a figure, in the next "frame" it would stay rotated? Second thing - if you run this code, and set the angle for, let's say 180 degrees the figure is being drawn in some random location. How do I fix this? Code:

Code:

function GenericFigure(context) {
	this.states = ["wait", "moving", "rotating", "stop"];
	this.state = this.states[0];
	this.ctx = context;
	this.sqrW = this.sqrH = 20;
	this.ctxW = 200;
	this.ctxH = 350;
	
	this.colorsO = {
		red : "#ee1515",
		green : "#45d137",
		blue : "#17a3f3",
		orange : "#ff910f",
		purple : "#680077"
	};
	
	this.colorsA = ["#ee1515", "#45d137", "#17a3f3", "#ff910f", "#680077"];
	
	this.pickColor = function() {
		var num = Math.floor(Math.random() * 5);
		return this.colorsA[num];
	}
}

function Rectangle(context) {
	this.inheritFrom = GenericFigure;
	this.inheritFrom(context);
	this.width = this.sqrW;
	this.height = this.sqrH * 3;	
	this.x = this.ctxW / 2;
	this.y = 0;
	this.rotation = -1;
	
	this.setRotation = function(angle) {
		this.rotation = angle;
	}
	
	this.rotate = function() {
		this.ctx.clearRect(0, 0, this.ctxW, this.ctxH);
		this.ctx.translate(this.x + 2 * this.width, this.y - 2 * this.height + 20);
		this.ctx.rotate(this.rotation * Math.PI / 180);
		this.ctx.fillRect(this.ctxW / 2, 0, this.width, this.height);
		this.ctx.restore();
	}
	
	this.moveDown = function() {
		this.y += 20;
		this.ctx.restore();
		this.ctx.clearRect(0, 0, this.ctxW, this.ctxH);
		this.ctx.fillRect(this.x, this.y, this.width, this.height);
		this.ctx.save();
		
		if(this.rotation > -1) {
			this.rotate();
		}
		l("A");
	}
		
	this.draw = function() {
		this.ctx.fillStyle = this.pickColor();
		this.ctx.save();
		this.ctx.fillRect(this.x, this.y, this.width, this.height);
	}
}

//a tak można wywołać:

var ctx = document.getElementById("game").getContext("2d");
var rect = new Rectangle(ctx);				
      rect.draw();
				
      var inte = setInterval(function(){if(rect.y >= rect.ctxH - rect.height){clearInterval(inte);return;}if(rect.y == 60) rect.setRotation(90);rect.moveDown();}, 500);

And the third problem:

Code:

this.ctx.translate(this.x, 0);

I thought, that this line should set orientation point to top left corner of my figure, but it seems, that it doesn't - after rotation my figure is being drawn two heights lower. Again - how do I fix it?

Any help will be much appreciated .

I've been reading a lot of tutorials on the canvas tag and seen a lot of people using JavaScript that looks something like:

ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.fill();

I understand that ctx is just the variable name and I can replace that with any variable I define, however, I'm looking for a list of all of the methods such as (moveTo, lineTo, fill etc...), as well as what they do.


I hope I'm explaining this or asking this correctly.

Thanks!

-Mike

Hello guys! I need your help!
I want to create a rectangle with a line in the middle with the canvas object. The problem is that the line in the middle gets bigger than the rest of the rectangle. How do I solve this? I believe it has something to do with shadows. If so, how do I turn them off. My code is:
<html>
<head>
<title></title>
</head>
<body>
<canvas id='chart' width='400' height='200'>
<script type="text/javascript">
var canvas = document.getElementById('chart');
var ctx = canvas.getContext('2d');

ctx.lineWidth = 10;
ctx.strokeRect(0, 0, 400, 200);

ctx.moveTo(0, 100);
ctx.lineTo(400, 100);

ctx.stroke();

</script>
</body>
</html>

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.

Anyone got any suggestions on techniques? The main one I find is to use translate to move the canvas around, which just seems odd to me. I don't even fully understand how it works. But the one I was looking at used clearRect. In examples given looked as though it had to redraw the canvas every frame.
I'm just mucking around with a simple poker game, figured i'd have the table in one layer and anything that moves on a top layer? By doing that I could only clear each card as it moved around...yes? Anyone know of a better way of doing things?

So I've been making a game using html canvas.

Here is a link to the game. (Move around with wasd, rotate turret with left and right arrows)
http://db.tt/ei3LlR

The problem is that the shadow flickers when it is rotated. This does not happen in firefox.

The shadow is not an image, but another canvas element, generated dynamically from the image of the tank. So the problem seems to be with webkit drawing rotated canvas elements inside another. Could this possibly be the reason behind this, or is it more likely to be a problem on my end?

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.

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?