|
JavaScript - Javascript Canvas Manipulation Showing Error
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] Similar TutorialsHi, I'm looking for some help, or perhaps an explaination in regards to "click & rotate" an image using your cursor with Javascript. I've seen this a couple of times on various websites and I'm wondering how difficult/expensive it is to develop such an image. I own a clothing company and what I'm looking to do is to create images on my website of a product in which the customer can click on and "rotate" to see a 360 degree view of the product. Think autocad to a degree... Is Javascript the best language to pursue for this function? I'm quite new to this department, so any help/advice is greatly appreciated. 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.
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... Hi 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 Hi all. I am using the Inline Form Validation Engine jQuery plugin found here, and though I have posted at their forum as well, am having a heck of a time (not being well versed in js OR Ajax, unfortunately) All I need to do is edit the code so that when the onSubmit function is processed, it returns only the first error it encounters, rather than keeping and display the array of every error. I have picked through the code several times, and can't seem to find where the array is stored. I thought perhaps I could find a for loop to limit, but am at a complete loss. Is there anyone out there who can help? I can post the code if needed; I didn't want to post the entire file (since I don't know which snippet is the one I need!) Thank you in advance! Hey this is my java script it works fine in FF , but in IE it shows type mismatch error .It shows my innerhtml page and also runs my script but i want to remove the type mismatch error would really appreciate your help.Thank you . Here is my javascript function function submitForm(){ // create request var xmlhttp = null; var serverhttp=null; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); serverhttp=new XMLHttpRequest(); if ( typeof xmlhttp.overrideMimeType != 'undefined') { xmlhttp.overrideMimeType('text/xml'); serverhttp.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); serverhttp = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert('Perhaps your browser does not support xmlhttprequests?'); return; } // submit in JSON notation var email = document.customer.elements[0].value; var companyName = document.customer.elements[1].value var input = '{email:"'+email+'",company_name:"'+companyName+'"}'; var url = "URL"; var cgi = "URL/script.cgi"; xmlhttp.open('POST',url,true); //serverhttp.open('POST',url,true); // show feedback xmlhttp.onreadystatechange = function (aEvt) { var newDiv = document.createElement("div"); newDiv.innerHTML = "<b>Thank You!</b>"; //type mismatch occures over here document.body.replaceChild(newDiv,document.customer); serverhttp.open('POST',cgi,true); serverhttp.send(companyName); } xmlhttp.send(input); } Hey this is my java script it works fine in FF , but in IE it shows type mismatch error .It shows my innerhtml page and also runs my script but i want to remove the type mismatch error would really appreciate your help.Thank you . Here is my javascript function function submitForm(){ // create request var xmlhttp = null; var serverhttp=null; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); serverhttp=new XMLHttpRequest(); if ( typeof xmlhttp.overrideMimeType != 'undefined') { xmlhttp.overrideMimeType('text/xml'); serverhttp.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); serverhttp = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert('Perhaps your browser does not support xmlhttprequests?'); return; } // submit in JSON notation var email = document.customer.elements[0].value; var companyName = document.customer.elements[1].value var input = '{email:"'+email+'",company_name:"'+companyName+'"}'; var url = "URL"; var cgi = "URL/script.cgi"; xmlhttp.open('POST',url,true); //serverhttp.open('POST',url,true); // show feedback xmlhttp.onreadystatechange = function (aEvt) { var newDiv = document.createElement("div"); newDiv.innerHTML = "<b>Thank You!</b>"; //type mismatch occures over here document.body.replaceChild(newDiv,document.customer); serverhttp.open('POST',cgi,true); serverhttp.send(companyName); } xmlhttp.send(input); } Hi all. Can someone tell me why I can select both HTML AND another radio button, but when I unselect, and select a # of 1 through 4, I can switch between the radio buttons, but I can't if I select HTML first? Also, what's wrong w/ this code? Code: <html>
<head>
<title>Webpage Teacher - V 1.0</title>
</head>
<body>
<script>
// set the radio button with the given value as being checked
// do nothing if there are no radio buttons
// if the given value does not exist, all the radio buttons
// are reset to unchecked
function setCheckedValue(radioObj, newValue) {
if(!radioObj)
return;
var radioLength = radioObj.length;
if(radioLength == undefined) {
radioObj.checked = (radioObj.value == newValue.toString());
return;
}
for(var i = 0; i < radioLength; i++) {
radioObj[i].checked = false;
if(radioObj[i].value == newValue.toString()) {
radioObj[i].checked = true;
}
}
}
function getCheckedValue(radioObj) {
if(!radioObj)
return "";
var radioLength = radioObj.length;
if(radioLength == undefined)
if(radioObj.checked)
return radioObj.value;
else
return "";
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}
</script>
<form name="radioExampleForm" method="get" action="">
<p>
<label for="code1"><input type="radio" value="HTML" name="code" id="code1"> HTML</label>
<label for="number0"><input type="radio" value="0" name="number" id="number0"> Zero</label>
<label for="number1"><input type="radio" value="1" name="number" id="number1"> One</label>
<label for="number2"><input type="radio" value="2" name="number" id="number2"> Two</label>
<label for="number3"><input type="radio" value="3" name="number" id="number3"> Three</label>
<label for="number4"><input type="radio" value="4" name="number" id="number4"> Four</label>
</p>
<p>
<script>
var thevar='';
if(document.forms['radioExampleForm'].elements['number']){
thevar='number';
}else{
thevar='code';
}
document.write(''
+'<input type="button" onclick="alert(\'Checked value is: '+getCheckedValue(document.forms[\'radioExampleForm\'].elements[\''+thevar+'\']));" value="Show Checked Value">');
</script>
<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['code'], 'HTML');" value="Set Checked to HTML">
<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], '1');" value="Set Checked to One">
<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], '2');" value="Set Checked to Two">
<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], '3');" value="Set Checked to Three">
<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], '4');" value="Set Checked to Four">
<input type="button" onclick="setCheckedValue(document.forms['radioExampleForm'].elements['number'], ''),setCheckedValue(document.forms['radioExampleForm'].elements['code'],'');" value="Uncheck All">
</p>
</form>
</body>
</html>
I simply want it to display the Check Value button and detect 2 different id's for 2 different radio buttons (which is 'code' and 'number') Thanks! Hi I'm making a php/html page and using javascript to keep a count for me. Code: <script type="text/javascript"> var i=0; }</script> . . . <form action="index.php" method="GET"> <input name="game_button" id="guess1" type = "submit" name="1" value="1" style="height: 50; width: 50; font-size: 16" onClick = "i=i+1;"/> </form> <input type="button" onClick = "alert(i);"/> The last button is just a test button, which will tell me what the value of "i" is, but I'm not getting anything when I cllick that button. However if I change the onClick from alert(i), to alert('i') it will alert me a string, so I know the javascript is working. Any ideas? I have a javascript banner on my site which is working perfectly. however if the user goes to my domain without www. infront of the address the banner is non existent. I'm pretty sure there should be some kind of option for this on my hosts control panel but I can't find anything on it however. (bluehost) or is there something else that must be done? Thanks for any help. Hello guys! I have a jquery fancybox that pop's up on exit (using onbeforeunload), now i want it to show only once so i tried doing it with cookies but i just can get it to work. this is my script so far hope you can help me with this, Thanks! Code: <script type="text/javascript">
function PopIt()
{
if (document.cookie.length == 0)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+7);
document.cookie="cook=yes" + ";expires="+exdate.toUTCString();
$("a#trigger").trigger('click');
window.onbeforeunload = UnPopIt;
return "Before you leave:\nPlease take a few seconds to answer 2 questions\nso we can better assist you and others in the future. \nThanks!";
}
}
function UnPopIt() { /* nothing to return */ }
$(document).ready(function() {
window.onbeforeunload = PopIt;
$("a#trigger").fancybox({
'hideOnContentClick': false,
'showCloseButton': true
});
$("a[id!=trigger]").click(function(){ window.onbeforeunload = UnPopIt; });
});
</script>
HI so sorry to bother you with what seems to be a simple problem i am just getting back into my coding and i can not see what i am doing wrong. i have my folder with index page in named "tester_fixed.html" and then a folder for images where i have place header1 header 2 and header 3 . i downloaded a script from http://www.javascriptkit.com/script/...bleslide.shtml and edited my images in and i think i mucked up as they are not showing. please could you tell me what i am doing wrong and point me in the right direction. Many thanks Bec the code: Code: <script type="text/javascript">
// Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use
var ultimateshow=new Array()
//ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]
ultimateshow[0]=['images/header1.jpeg', '', '']
ultimateshow[1]=['images/header2.jpeg', 'http://www.dynamicdrive.com', '_new']
ultimateshow[2]=['images/header3.jpeg', 'http://www.codingforums.com', '']
//configure the below 3 variables to set the dimension/background color of the slideshow
var slidewidth="240px" //set to width of LARGEST image in your slideshow
var slideheight="940px" //set to height of LARGEST iamge in your slideshow
var slidecycles="3" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="no" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'
//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000
////Do not edit pass this line////////////////
var ie=document.all
var dom=document.getElementById
var curcycle=0
if (preloadimages=="yes"){
for (i=0;i<ultimateshow.length;i++){
var cacheimage=new Image()
cacheimage.src=ultimateshow[i][0]
}
}
var currentslide=0
function randomize(targetarray){
ultimateshowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
ultimateshowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}
if (randomorder=="yes")
randomize(ultimateshow)
else
ultimateshowCopy=ultimateshow
function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='</a>'
ultcontainer+='</center>'
if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultimateshow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
setTimeout("rotateimages()",slidedelay)
}
if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}
if (ie||dom)
window.onload=start_slider
</script>
<p style="font: normal 11px Arial">This free script provided by<br />
<a href="http://www.javascriptkit.com">JavaScript Kit</a></p>
thanks Hello, I'm new to the forum. I tried coding this myself, but i'm just not that well versed in javascript and need a little help. I am trying to show certain div tags when you click on a hyperlink in an html document. I have four links (bio, news, portfolio, and resume) and four div tags (bio, news, portfolio, and resume). I am just going to show the code for one of the links. This is what I have for the bio link in the head of the html: Code:
function setVisible( setting )
{
var myElement = document.getElementById("bio");
if(setting)
myElement.style.visibility="visible";
else
myElement.style.visibility="hidden";
}
</script>
This is what I have in the style sheet: Code:
#bio {
position: absolute;
font: 9pt arial;
line-height: 10.5pt;
color: #fff;
width: 575px;
height: 300px;
margin-top: 390px;
margin-right: auto;
margin-left: 40px;
margin-bottom: 5px;
z-index: 1;
border: 0px solid #fff;
}
This is what I have on the link in the html doc (I'm assuming this is wrong, I don't know what the proper code should be): Code: <a href="javascript:onClick="setVisible(true)";">BIO</a> Does what I'm trying to do make sense? I'm assuming that it would be the same set up for all four links? Please let me know if I need to be more specific. Any help would GREATLY be appreciated! Thank you, Gerry Hi there I've just completed a lovely slideshow script on my homepage. It works great in Firefox, but doesn't display at all in IE. It's on a live test page he http://www.modern-wedding-ideas.co.uk/index2.html I'm sure I'm just missing something really simple. Any help would be greatly appreciated. Also, this is a copy and paste job: I'm a newbie to javascript! So please be gentle. Many thanks Nicola Hi, Sorry for the (HELP!) addition in the title, but i'm just stumped here. I am trying to show and hide div layers when I click on a button in a flash movie. The flash movie is in it's own div and the content below is also in it's own div. Is there a way to call the function from flash so that content in another div is affected? The code to show and hid layers in html is working and is he Code: //visible layers
function $_(IDS) { return document.getElementById(IDS); }
function setVisible( IDS ) {
var obj;
var sel = $_('divContent').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
obj = sel[i].id;
if (obj != IDS) { $_(obj).style.display = 'none'; }
else { $_(obj).style.display != 'block' ? $_(obj).style.display="block" : $_(obj).style.display="none"; }
}
}
window.onload = function() {
setVisible('BIO');
};
</script>
</head>
<body>
<div id="navigation">
<a href="#" onClick="setVisible('BIO'); return false;">Who I Am</a><span class="text4"> |</span>
<a href="#" onClick="setVisible('News'); return false;">What's New</a><span class="text4"> |</span>
<a href="#" onClick="setVisible('Portfolio'); return false;">Portfolio</a><span class="text4"> |</span>
<a href="#" onClick="setVisible('Resume'); return false;">Resume</a>
</div>
<div id="divContent">
<div id="BIO" class='divElem'>
<p>This is my content for bio</p>
</div>
<div id="News" class='divElem'>
<pThis is my content for news</p>
</div>
<div id="Portfolio" class='divElem'>
<p><This is my content for portfolio </p>
</div>
<div id="Resume" class='divElem'>
<p>This is my content for resume</p>
</div>
</div>
</body>
Is there a way to call the function in flash on a button? Any help you can give would be GREATLY appreciated. Thanks and forever indebted. Gerry Hya, I've been trying to get a marquee working for my site, and would like it to use an external file for the text that it scrolls. Currently nothing is showing up except for a little space where it should be that is only visible when I highlight the page by selecting edit>select all I have used the script avaliable here but instead of inserting the script into the body I have put it into an external .js my script is the same as theirs except I have made the links point to my documents instead of the samples they gave, however I will paste it here incase I have managed to delete one vital full stop or something. Code: <IE:Download ID="marqueedata" STYLE="behavior:url(#default#download)" />
<marquee id="externalmarquee" direction=up scrollAmount=4 style="width:200px;height:150px;border:1px solid black;padding:3px" onmouseover="this.scrollAmount=2" onmouseout="this.scrollAmount=4" src="News.htm">
</marquee>
<script language="Javascript1.2">
function downloaddata(){
marqueedata.startDownload(externalmarquee.src,displaydata)
}
function displaydata(data){
externalmarquee.innerHTML=data
}
if (document.all)
window.onload=downloaddata
</script>
<![endif]-->
I'm guessing it's because I have incorrectly moved the code from inside the HTML to the external .js. My website is avaliable here And the code I have used to insert this into the HTML (which I have a feeling is the problem) is as follows: Code: <div> <script type="text/javascript" src="/News.js"> </script> </div> Cheers, Al Hi I have a given url and want to back up a level. So for example if start with: url = "test/level1/level2/level3/" I would like to it remove the "level3/" to become url="test/level1/level2/" Hi i was wondering if anyone might be able to help me here as i hve an idea but not quite sure how to impliment it. I want to be able to create 2 Divs, 1 for my navigation button and a second for an image to be placed in. i ant to be able to have the 2nd div move position to underneath Div 1 when i hover over the navigaton(div 1). Ive attached a link to a diagram of what i mean Any help would be very much apreciated http://spark-box.co.uk/images/ideaz.jpg I have tried to manipulate attributes in a specific class & am successful by using jquery. Now for the purpose of learning I want coders to look at my simple snippet & tell me how can I use functions namely getElementsByTagName & For loop instead of each. http://jsfiddle.net/defencedog/Zz7cX/ [My snippet adds 'fullscreen' functionality to youtube vids, which unfortunately isn't present in default phpBB3 forum engine] regards;; |
|||||||