|
JavaScript - Canvas Drawing Problems....
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;
}
Similar TutorialsI have a Canvas controller Class and a new Sprite Controller class Please note I'm not using GIF sprites these are proper programmable sprites like you get in C game engines So i have a Class that controls my Canvas and the Drawing of my Canvas what i mean by this is if you call a new instance of my Class it will create a new Canvas if you already have a canvas you can get a JSRenderEng Object from your Canvas id Now my problem lies with getting my sprites to draw them self's currently my sprites can only appear in one place in a 100x100 px canvas they load as 98x98 1top 1left so they should be a perfect mathematical square inside the canvas with a 1px border, for some reason its not drawing But here is an explination about the classes The Canvas handles the start of the drawing events by going though the sprites attached to the canvas and then calls there draw method, However i seam to have a problem with this my draw method is being fired but is not rendering on the canvas can any one spot the problem. PHP Code: this.draw = function(){ //this.updateParams(); var context = this._canvas.getContext("2d"); context.beginPath(); context.fillRect( 98, 98, 1, 1 ); context.fillStyle = "#000000"; context.fill(); context.closePath(); } Was putting the width and height and the location in the wrong order (DURRRR) I am trying to create an Asteroids type game using JavaScript along with html5's canvas element for drawing. I have searched around and have looked at examples but I can't figure out what is wrong with my rendering that I do in the game loop that is run every frame. The problem appears to be only that the canvas is not cleared at the beginning of each frame but I feel there might be something wrong also. The code used and shown below only works in Firefox but not Google Chrome or Safari. Here is a picture of what it renders in Chrome: What is is supposed to look like and is in Firefox: Here is my set up for drawing on the canvas: Code: var canvas = null;
var c2d = null;
//...
window.onload = init;
function init() {
canvas = document.getElementById('canvas');
c2d = canvas.getContext('2d');
setInterval( step, 1000/FPS );
//...
//c2d.setTransform(1,0,0,1,0,0); // reset to identity <--Do I need this?
}
Below is the game loop function. Am I clearing the canvas correctly because it does not clear the screen? Also am I using the save and restore functions correctly? Each asteroid and player drawn is at a different of position and rotation so am I doing it correct to draw them? Code: function step() {
//...
canvas.width = canvas.width; //clear canvas PROBLEM
//Things I have tried:
//canvas.height = canvas.height; //clear canvas
//c2d.clearRect(0, 0, canvas.width, canvas.height);
for (u=0;u<asteroids.length;u++) {
c2d.save();
asteroids[u].draw();
c2d.restore();
}
c2d.save();
player.draw();
c2d.restore();
c2d.strokeStyle = "#000000";
c2d.stroke();
}
Below is the Asteroid and Player drawing functions. The Asteroid is a polygon and the Player is a triangle. Both rotate and are draw correctly but should I be passing a reference to the drawing reference? Code: function Asteroid_draw() {
c2d.translate( this.x, this.y );
c2d.rotate(this.angle);
for (i=0;i<this.points_x.length-1;i++) {
c2d.moveTo(this.points_x[i],this.points_y[i]);
c2d.lineTo(this.points_x[i+1],this.points_y[i+1]);
}
c2d.moveTo(this.points_x[0],this.points_y[0]);
c2d.lineTo(this.points_x[this.points_x.length-1],this.points_y[this.points_x.length-1]);
}
function Player_draw() {
c2d.translate( this.x, this.y );
c2d.rotate(this.angle);
//Points {0,-12}{7,5}{-7,5}
c2d.moveTo(0,-12);
c2d.lineTo(7,5);
c2d.moveTo(7,5);
c2d.lineTo(-7,5);
c2d.moveTo(-7,5);
c2d.lineTo(0,-12);
}
Any help is appreciated. 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>
Code:
<html>
<head>
<title>test</title>
</head>
<body>
<script language = "javaScript">
var clouds = [];
var i = 0;
while(i <= 5) {
var cld = new Image();
cld.onload = function()
{
clouds.push(cld);
}
cld.src = "cloud.png";
i++;
}
document.write(clouds.length);
</script>
</body>
</html>
Where am I messing up clouds.length returns 0. Why? I know this is simple, but it will get more complex. I can search for the code, but I would like feedback as to what I'm doing wrong. This is more than likely going to be a multi stage question. More to come... ------ Also, I would like to say that this is my first post. Thanks in advance to those who reply. I am using this: http://www.crowdsavings.com/open-source/drawbox (http://page-test.co.uk/jquery.drawbox.js is the main JS file). It works fine on desktop browsers, but there is an issue on every Touch mobile phone I have tried. When you draw on the canvas and then go to click a button off the canvas, it doesn't work. You need to touch off the canvas and then the button. So using the demo above, if you draw on the canvas and then click the 'Clear Canvas' button, it doesn't work and you have to press it again. I have tried setting focus on the body and also detecting what the focus is when a touch action is performed, but no luck. I know the entire screen is responsive to touch and mouse events, where I would have thought it best to just make the canvas section respond to touch/mouse events. Well, I clearly haven't the experience with javascript to understand why I can't do this: Code: function bubbleSortKernel(a, b) {
if (b < 50) {
swap(a, b);
draw();
setTimeout("bubbleSortKernel(++a, ++b)", 200);
}
}
where Code: swap(a, b) does just what it says: swaps the two elements in an array, and Code: draw() looks about like this: Code: function draw() {
if (ctx != null) {
ctx.clearRect(0, 0, width, height);
for (var i = 0; i < rectangles.length; i++) {
ctx.fillRect(x, rectangles[i][0], rectangles[i][1], rectangles[i][2]);
}
}
}
I'm newer to javascript that other things, and this seems perfectly legal to me. I'm looking for someone who knows more that I and can explain what I'm missing. I'm guessing my timeout doesn't really work like I think it does, but I've gotten so frustrated I can't see the forest for the trees. Any help or nudge is greatly appreciated. Thanks! How would i draw a line on a page dynamically, like if i were clicking points on a map and i wanted to link them together. How could i do that? i found this, but maybe you know of something better that would not require coordinates 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 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>
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 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 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. 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? 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? 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 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 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) |
|||||||