|
JavaScript - New To Javascript Pls Help (image For Canvas Element)
I am very new to javascript(and these forums) and I am teaching my self to use the canvas element.
I am trying to draw an image to the canvas but nothing is appearing. And I am getting no error in the chrome console. Can anyone see why? Code:
function RPGanimation(options)
{
this.initcanvas(options);
this.initbackground(options);
};
RPGanimation.prototype = {
initbackground: function(options){
this.background = new Image();
this.background.src = options.backsource;
this.background.onload = this.drawbackground();
},
initcanvas:function(options){
this.canvas = document.getElementById(options.canvasid);
this.context = this.canvas.getContext('2d');
this.dimensions = {width:this.canvas.width,height:this.canvas.height};
},
drawbackground:function(){
//document.write('<IMG SRC="Chrysanthemum.jpg">');
this.context.drawImage(this.background,0,0,this.dimensions.width,this.dimensions.height);
}
};
I create the object in a webpage with the canvas element created just before that script tag... Similar TutorialsHi everyone, I am trying to make an image mask using javascript. The basic idea is that the image on the canvas will appear as a black box. When the user hovers over the image a small part of it is revealed. I have attached a picture as an example because its quite hard to explain! Any help would be appreciated! Thanks, Luke I'm playing around with full browser canvas element it seems to spill beyond the browser bounds generating horizontal and vertical scrollbars. This is the technique I'm using: Code: <canvas id="c" width="1" height="1"></canvas>
<script type="text/javascript">
var ce = document.getElementById("c");
var cc = ce.getContext("2d");
function draw() {
var ctx = (cc);
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
//
ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
ctx.fillRect(0, 0, ctx.canvas.width, 100);
}
draw();
$(window).resize($.debounce(100, function() {
draw();
}));
</script>
I've also tried to wrap the canvas element inside a div and set that div's overflow equal to hidden, but the results are unchanged. Does anyone have any insight on this? 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) 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 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. Hello all; I am trying to load four images into a canvas using an array. The images load fine and all, however they are resizing weird. I haven't specified what I want them to resize to, as the actual image are already the sizes I want. However when loaded into the canvas they are sizing differently then their actual sizes. Even when I specify their actual size in the code, they still resize weirdly. Here is my code: Code: <body>
<canvas id="worldscreen" class="map"></canvas><br />
<script type="text/javascript">
function loadImages(arrow, call) {
var images = {};
var loaded = 0;
var num = 0;
for (var src in arrow) {
num++;
}
for (var src in arrow) {
images[src] = new Image();
images[src].onload = function(){
if (++loaded >= num) {
call(images);
}
};
images[src].src = arrow[src];
}
}
window.onload = function(images) {
var canvas = document.getElementById("worldscreen").getContext("2d");
var arrow = {
top: "sideQUEST/images/arrow-top.png",
right: "sideQUEST/images/arrow-right.png",
bottom: "sideQUEST/images/arrow-bottom.png",
left: "sideQUEST/images/arrow-left.png",
};
loadImages(arrow, function(images) {
canvas.drawImage(images.top, 100, 18);
canvas.drawImage(images.right, 215, 36);
canvas.drawImage(images.bottom, 100, 115);
canvas.drawImage(images.left, 36, 36);
});
};
</script>
</body>
You can see the code in action he http://myrmidon16.x10.mx/test.php. This is very frustrating and if you have any suggestions it would be greatly appreciated. Thank you. Hello, I'm working on a small project and I'm new to javascript, basically on my canvas I have drawn a fault tree diagram that look like this View image: zoomzoom, what I want is too zoom in/out using the mouse wheel, and use mouse button to pan it to left/right. Don't really know where to stand so any advice would be helpful.
Hello everyone, I am trying to make a canvas element display an image with some text on using canvas.drawImage and canvas.fillText. Only problem is my code is generating a very odd and hard to debug error. Thanks in advance, Alex Code(JS): Code: function runstuff() {
canvasthing = document.getElementById('1');
context = canvasthing.getContext('2d');
purple = new Image();
purple.src = 'img/buttonpurple.png';
purple.onload = function() {
context.drawImage('purple', 0, 0);
};
context.font = '16px Vani';
context.textBaseline = 'top';
context.fillText('Test', 26, 24);
}
Code(html): Code: <!doctype html> <html lang="en"> <head> <title>POB.G</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="script.js"> </script> </head> <body onload="runstuff()"> <canvas id="1" width="127" height="128"></canvas> </body> </html> Error: Code: Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: file:///C:/Users/*BlahBlahBlah/script.js :: <TOP_LEVEL> :: line 7" data: no] Okay, so I have a canvas, and I want the user to be able to copy an image url and paste it into an input box, that will then set it as the canvas background image. Does anyone know how I can do this? I was thinking about using the OnChange method in the text input, but I cannot find any help with that online. My current Canvas Background is (In <head><script>) Code: var imgObg = new Image(); imageObj.src = "images/bg.png"; And my text input is Code: <form name="input" action="" method="get"> <input type="text" id="textboxBG" onchange="??" /> <input type="submit" value="Submit" /> </form> If you need more code, or would like to help me out more in depth, I would gladly paypal you a little money. I know this can't be too difficult! I REALLY want this done! HI I want to write a search for my site .I make a new panel in the left of my menue and it has a text input and an image which when that user click on it javascript opens a new window which is a php page.The part I don't know how to do is when the user click on the image it should get the content of the text input and pass it to the url.For the hyperlink of the image I use "<a href="javascriptpen_window('includes/func/search.php?id=" But I don't know what should I write after that to get the content of the text input and put it in the next of the id. How can I do so? Thanks I am using a jQuery slider for a website but the W3C comes up with invalid because: document type does not allow element "div" here .before('<div id="buttons">') Code: <script type="text/javascript">
$(document).ready(function() {
$('#slider')
.before('<div id="buttons"></div>')
.cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
pager: '#buttons'
});
});
</script>
Any help with this would be appreciated thanks. Ok guys, I am finally not being lazy anymore and going through my images and writing better code. But unfortunately it is proving to be slightly more difficult then what I thought. Basically, I cannot find a way to set a element ID using javascript. Right now I am preloading my images through JavaScript and setting them like this Code: goodAfternoon = new Image(400,200) goodAfternoon.src = "Good Afternoon.gif" But I cannot find out how to setElementId() to the picture I am setting in JavaScript, I can do it in HTML by Code: <img src="Good Afternoon.gif" id = "pic_afternoon" name="goodAfternoon"> but this code displays the image which I do not want to do with all of my pictures right away. So how can I preload images and set the Ids of them without displaying them? Hello. I have a table with td elements containing numbers in one row and td elements containing textareas in the second row like this: http://motionsroom.com/example.html I want to find an easy way for the user to click, draw a rectangle around or whatever around any several numbers so that they they would be put in a single td element instead of two or three (so we would have: "49 and 12" as the new value) and then the textareas below would also merge. Ideally, I would like to have a rectangle like in RTS games but then I would settle on whatever is easy. Is there any way I could do that? Thanks! Its about this: http://www.wduffy.co.uk/blog/keep-el...omment-page-1/ Everywhere is used for a whole div on some side and when its on the top of the page. But what if its in the middle..? Look here - http://phpbb.bg/viewtopic.php?f=14&p=1013#p1013 Scroll down and then up.Anyway to fix this? I am trying to make images change as the user selects the option from the dropdown menu , I have called alert("test1"); alert("test2"); to check if the functions are being called but only the first one happens, can you please tell me what's wrong with the script. Here is the script:
Code: var oImageChooser;
addEvent( window, "load", initialize)
function initialize()
{
alert("test1");
var oImageChooser = document.getElementById("imageChooser");
addEvent(oImageChooser, "change", loadCached);
}
var imageLibrary = new Array();
imageLibrary["image1"] = new Image(120,90);
imageLibrary["image1"].src = "images/desk1.gif";
imageLibrary["image2"] = new Image(120,90);
imageLibrary["image2"].src = "images/desk2.gif";
imageLibrary["image3"] = new Image(120,90);
imageLibrary["image3"].src = "images/desk3.gif";
imageLibrary["image4"] = new Image(120,90);
imageLibrary["image4"].src = "images/desk4.gif";
function loadCached()
{
alert("test2");
var imgChoice = oImageChooser.options[oImageChooser.selectedIndex].value;
document.getElementById("thumbnail").src = imageLibrary[imgChoice].src;
}
here is the html Code: <html> <head><title>Image dropdown</title> <script type = "text/javascript" src = "experimento5.js"> </script> </head> <body onload = "initialize()"> <h1> Choose any image</h1> <img id = "thumbnail" src = "images/desk1.gif" > <form> <select id = "imageChooser"> <option value = "image1"> Bands</option> <option value = "image2"> Clips</option> <option value = "image3"> Lamp</option> <option value = "image4"> Erasers</option> </select> </form> </body> </html> I am new to javascript and would like to search for the element with id but the element id are changing if i use different navigation in that web page example: C21_W68_V69_notes_struct.text changes to C24_W78_V79_notes_struct.text or any other name next time hence i would like to search that element using a pattern like notes_struct.text as there exist only one element ending with this pattern. I am using old version IE and would like to use javascript only. Kindly help. Fairly new the javascript, as in only been tinkering around for about a day. So forgive me if this is a simple question. At the moment I have the following function for handling events such as onclick, mouseover, mouseout. Code: function switcher(action, img){
switch(action){
case "hover":
//mouse is on image
document.imgSeat.src = "images/hover.gif";
break;
case "click":
//mouse has clicked image
document.imgSeat.src = "images/click.gif";
break;
default:
//mouse elsewhere
document.imgSeat.src = "images/defaulter.gif";
break;
}
}
And the html the function refers to Code: <body> <div id="imagesholder"> <a href="#nerf"><img border="0" id="seat0" src="images/available.gif"></a> </div> </body> What im trying to do change my function so that instead of it being hard coded for the id "imgSeat" i can use the id passed through the parameter "img" instead. However I seem to be banging my head against the wall. I've tried using the following Code: document.getElementById(img).src = "images/available.gif"; //no error, just does nothing //where img is "0" instead of "seat0" document.seat[img].src = "images/available.gif"; //error: document.seat is undefined Would be extremely greatful if someone should push me in the right direction or show me what im doing wrong. i want to add a tooltip----click to copy to the Copy To Clipboard... box like this site(http://www.retailmenot.com). the yellow part with a Scissor. but when i used jquery to add it. it doesn't work. why? i test it on this site: Quote: http://bowser.effectgames.com/~jhuck...rd/test10.html Code: $(document).ready(function(){
$("#d_clip_container").hover(
function () {
$(this).append($('<span class="tip">click to copy</span>'));
},
function () {
$(this).find("span:last").remove();
});
})
i have added the jquery library. The reason of the tooltip can't work maybe the copied text is wrapped by the flash, but this site (retailmenot.com) can do. i don't know why? how to do it? thank you. |
|||||||