Can't Get HTML Canvas To Work In IE
Jan 1, 2011I 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.
View 5 Replies
ADVERTISEMENT
CANVAS - Change Canvas Stroke On A Typeface Hover - Stroke() Doesn’t Work?
Mar 16, 2009I have a menu in which is applied typeface script. Typeface 0.11 version doesn't support hover on links. There is an experimental version but doesn't work very well for me, so i tried to implement hover by myself.
Problem is: hover works pretty well changing canvas context property fillColor and then calling fill(), but the stroke on hovered voice remains on another color. Difficult to explain, so i put some test code online: TEST CODE As you can see, passing with mouse on the menu voices triggers the hover and the element change, but remains bordered in red.
[Code]...
Canvas Doesnot Work In IE?
Feb 23, 2010Why doesn�t the following code work in IE, I use excanvas.js as told in other articles? excanvas is in the same dir as the html-file.
Code:
<html>
<head>
<title></title>[code].....
Canvas.drawImage Doesn't Work / Resolve This?
Jul 19, 2011I'm new to javascript and html5.
I've been having problems with some simple(?) lines of code...
What I'm trying to do is to simply turn the canvas black and show a small gif on it. Upon executing initCnv(), the canvas turns black as it should, while the sprite image doesn't show up at all. I can't figure out what's going on, I scoured the code for syntax errors, even tried other image formats but to no avail. Image paths are also correct.
JQuery :: Getting The Webshims Plugin Canvas Polyfill To Work
May 20, 2011I am having problems getting the webshims plugin canvas polyfill to work. I get the following error in IE9 using IE7 mode: SCRIPT438: Object doesn't support property or method 'fillRect' problem.html, line 21 character 7 when I try to run this code:
[Code]...
Using Output For HTML Elements Outside Canvas
Apr 7, 2009Before the canvas tag you had to write a script to make a gradient for html element backgrounds. Now you can use canvas and it's as easy as ... well messing with canvas. I have this script. At one point I had the gradient img objects resizing so the gradient would not get skewed. it was simple. just set the height% at the opposite ratio of the canvas width/height. But I went to make some changes and the next thing i knew that no longer worked. I don't remember how I did it!! I'm going to have to start over if I can't figure it out. Here's the script. Canvas only.
I haven't adapted with excanvas for IE yet, but that's coming when I can figure out how I had the thing working right. It's a css issue. I had thought I put the img objects in divs that were sized and positioned and then set the images to width 100% height= 100%*((canvas.width-canvas.height)/canvas.width) So in my example, the canvas was 100 x 30 and the factor is 7 so it would resize the image 700% and the height would grow by the relative amount to the setting I had it. I'll try to figure it out, but there's the script working somewhat. I want to figure out a way to resize the img objects when the user resizes the page, but I want the img to always maintain aspect ratio. [URL]
<script>
/*ORIGINAL SCRIPT FOUND AT [URL]*/
window.onload = function () {
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var g = ctx.createLinearGradient(0, 0, 100, 50);
g.addColorStop(0, 'rgba(255, 255, 0, 0.5)');
g.addColorStop(0.5, '#0ff');
g.addColorStop(1, '#00f');
ctx.fillStyle = g;
ctx.fillRect(0, 0, 100, 50);
var data = canvas.toDataURL();
document.getElementById('i').src = data;
document.getElementById('EIMG').src = data;
var canvas2 = document.getElementById('c2');
var ctx2 = canvas2.getContext('2d');
var g2 = ctx2.createLinearGradient(0, 0, 100, 50);
g2.addColorStop(0, 'rgba(255, 0, 255, 0.5)');
g2.addColorStop(0.5, '#0ff');
g2.addColorStop(1, '#00f');
ctx2.fillStyle = g2;
ctx2.fillRect(0, 0, 100, 50);
var data2 = canvas2.toDataURL();
document.getElementById('i2').src = data2;
document.getElementById('DIMG').src = data2; .....
How To Dynamically Create HTML 5 Canvas
Jun 19, 2011Here's a snippet:
canvases[i] = document.createElement('canvas');
canvases[i].style.width = '3px';
canvases[i].style.height = '100%';
canvases[i].getContext("2D");
canvases[i].fillRect(1,0,1,table_height);
I'm trying to dynamically create a canvas element. Later in the script it gets attached to the DOM, and this works fine if the last two lines are missing. I end up with a canvas element that is 3px wide and 100% of the containing div tall. However, the last two lines make it crash, with the error report 'canvases[i].fillRect is not a function'.
If I change the last two lines to:
var drawing = canvases[i].getContext("2D");
drawing.fillRect(1,0,1,table_height);
It says 'drawing is null'. Something seems to be going wrong with the getContext bit, because setting the height and width work fine. It behaves the same if I append the canvas element to the DOM before trying to do the drawing as well. This is in FF4.0.1 with a xhtml1-strict.dtd doctype and valid html.
HTML 5 Canvas Element Animation Save
May 18, 2010My application is based on client-server architecture. It is a E-Learning Application. I am using ruby on rails server, javascript,canvas,SVG element. I have an idea of an interface to allow the teacher to build any type of animation for students using Cake javascript API. I wanted to save the animation build using the canvas element on the rails server either in database or as a file. Later I have to use that animation to be played to students. Any way to do it on any language except proprietary languages like flash but from that language communication can be done with rails server.
View 1 Replies View RelatedShim Layer For Bind() - Sprite Animation On The Canvas Wouldn't Work On Safari Or Older Versions Of Firefox
Aug 30, 2011I have a script that runs a sprite animation on the canvas, adapted from here: [URL] After wondering why it wouldn't work on Safari or older versions of Firefox, I saw this: [URL] and implemented the suggested shim. However, I'm still getting some errors that I can't explain for the life of me. To make this easy for everyone, I threw it in a jsfiddle: [URL]
View 1 Replies View RelatedDelete Lines On Canvas, But Not The Whole Canvas?
Jul 12, 2011I want to delete some lines on the canvas that i have created in HTML5 (with the <canvas> tag). I know one solution and that is using clearRect() (give this function the HEIGHT and WIDTH of the canvas and you clears the whole canvas.).But i don't want to clear the whole canvas, i only want to delete a few lines made by the function lineTo().
View 1 Replies View RelatedCanvas:fillText(...) Doesn't Work In IE - Says "object Doesn’t Support This Property Or Method"
Feb 24, 2010Why doesnt the following code work in IE. There is an error on the same row as fillText. It says object doesnt support this property or method.
<html>
<head>
<title></title>
<script type="text/javascript" src="excanvas.js"></script>
</head>
<body>
<canvas id='chart' width='500' height='200'>
[Code]...
Work Along With A HTML Form And A Function?
Jan 3, 2010come across the switch statement and has been trying to understand it with this simple coding i came up with. I think I have the syntex of the switch command correct but I'm trying to get it to work along with a HTML form and a function. I've been trying to figure out what i am do wrng but can not seem to see the solution. can someone guide me to the solution?
<html>
<head>
<title>Using the switch statement.</title>
[code]....
OnClick - HTML Drop Down Box To Work With Images Instead?
Apr 12, 2010HTML drop down box to work with images instead?
[Code]....
What i want is just 3 images (representing the currency flag) I have tried just simply using the onclick="" but im guessing i will need to create a JS function?
Tooltip Doesn't Work When Building HTML Via DOM
Jul 21, 2010I built a site w/ a fairly simple jQuery tooltip that displays an image w/ a border around it on mouseover using a script from URL....I'm trying to use the 2nd script they provide. It worked great with regular html, but then I decided to build the html that produces the tooltip w/ the javascript.Now this code still works fine in IE, but not FF or Chrome (oddly enough). The images are built just fine in FF and chrome, but the tooltip simply doesn't show up at all. There are no javascript errors being reported.So there seems to be some problem in how I'm creating the html using javascript. The elements I'm creating aren't using the tooltip function somehow.I can include the CSS if needbe, but its pretty simple.
View 14 Replies View RelatedJQuery :: After Appending Html, Stuff Doesn't Work?
Oct 24, 2009I'm working on a list with doctypes and fases. There are n types and n fases. The fases can be ordered by dragging them.
example:
[btn Append new type]
- a
- a.1
- a.2
[Code]....
I have a fancybox (lightbox) to append new doctypes and fases, but after appending either one, the functions dont work anymore (dragging and opening the lightbox of the appended doctype.
The HTML gets appended without a prob. But it seems that the initiation of the draggable <ul> and the lightbox links doenst work.
I tried adding Javascript to re-initialize the functions, but this doenst work.
How can i fix the prob that appended links with the right class show the lightbox when they are clicked, and how do i make an <ul> draggble after one is added?
p.s.
function appendFase(docTypeId,appendThis){
$(docTypeId).append(appendThis);
$(docTypeId).sortable('refresh');
}
gives error's...
JQuery :: HTML Select Add Option Does Not Work In Firefox
May 20, 2009I am trying to add select items via jquery to a select control. The following code works perfectly in IE, Opera. Chrome and Safari, but for the life of me I cant get it working in firefox. I really don't think its a bug but I must be missing something obvious.
<html><head>
<script type="text/javascript" src="../lib/jquery/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../lib/jquery/js/jquery.selectboxes.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
PopulateSelect();
});
function PopulateSelect(){
$("#s1").removeOption(/./);
$("#s1").addOption("Value1", "Text1");
$("#s1").addOption("Value2", "Text2");
};
</script></head><body>
<select name="s1" id="s1" onchange=""> </select>
<input type="button" name="button" id="button" value="Button" onClick="javascript:PopulateSelect()">
</body></html>
JQuery :: Using Cycle Lite And Lightbox In Same HTML Doc - Cannot Get Both To Work?
Jul 21, 2010thereI have used two jQuery plugins on one html page - Cycle Lite and Lightbox. However, I can only get one plugin to work at one time. With the following code, Cycle Lite works but Lightbox doesn't.
[Code]...
How Do I Get Variables In External JS File To Work In Html Page?
Jul 14, 2007I need help getting variables in an external js file to transfer to the html page that uses them. I have an html page that lists verses to memorize, which, when the mouse hovers over a particular verse, a small popup reveals the book reference for that verse, thus giving a check to see if the user has accurately referenced that verse for its source.
I have an external js file (VERSES.js) that houses the verses and popup references sequentially as elements in an array and then writes them to the html document. A simplifed version of what I am using, with only a few verses listed here as an example, and that works beautifully, is given below: Code:
Build A Site Using Html - Css - Doesn't Work With Firefox
Jul 22, 2010I am trying to build a site using html, css and javascript. problem is it works perfectly in IE but practically not at all in firefox. I have lots of mouseovers and tooltips, none of which will work. The only thing that seems to work is an onload random image generator. The html and css all return no errors using firefox's validation tool. I am completely new to javascript and have been trying to learn via building this site, so apologies if the code is really messy. Would be really grateful if anyone could help - I thought I was getting to grips with this when it all worked in IE, but am now feeling pretty stupid and think I must be missing something pretty fundamental. I've spent an age getting frustrated trying to resolve this.
[Code]...
JQuery :: Can Listeners Work For Html Added Client Side
Sep 15, 2010I have taken over from a developer who has used javascript to add additional text input boxes to a form so there is no limit to the number of input boxes there can be. I have got a jquery autocomplete function that works fine if the input box is added by the server but the listener doesnt fire when the text box is added client side. As with all things this is part of a much bigger project and I only want to change the smallest possible part (add autocomplete to this text input box) MY QUESTION: is it even possible fo ra jquery listener to fire when the input box has been written client side after the page has loaded? Is there a way to "refresh" a listenerto find the new tag that have been added?
View 2 Replies View RelatedJQuery :: Convert Dates To String To Work With HTML Page?
Dec 8, 2011Im having to create an html page that displays the current date that i need to extract from a .JS file eg: daysOfTheWeek: [Content.dates.sunday] I have to convert this into a string to work on my HTLM page...So far i have managed to get this far
<h4>It is now </h4>
<span class="dateHolder"></span>
</head>
[code]....
JQuery :: Why Does String Replace() Not Work For The Results Of The Html() Method
Aug 13, 2011I've seen an other post talking about not being able to perform a .html().replace() also, but no one replied.
[URL]
Why is this? I ran into the same problem and from what I was seeing, the replace() was only replacing the very first match. My work around was pretty simple, I just keep running replace() until it was done, but I'm dumbfounded as to why this would need to be done.
while (newLastRow.html().indexOf(settings.placeholder) > -1){
newLastRow.html(newLastRow.html().replace(settings.placeholder, curTotal)); }
As with the other post, I'm dynamically adding html to the page using a template, where the replace() method is updating the IDs of the fields when adding a new instance.
What's special about the value returned by the html() method? Is there a different preferred way to do this?
Catching Keypress In Canvas Tag
Jun 22, 2006I am trying to catch keypresses in my canvas tag, but it appears that
that is not valid.
I may try to just create a hidden input box that will allow me to catch
keypresses.
I am trying to write a very simple asteroids game for a presentation on
Ajax in July, to show that javascript can do more than it was able to a
couple of years ago.
JQuery :: Add A Class To Canvas?
Aug 16, 2010I am working with the new canvas element. I have simplified my request.
Can I add a class to the canvas JS? Currently the fill colour is set with 'context.fillStyle="red";' I would love have this in a class as I want to change the colour of the fill with jQuery.
<!DOCTYPE html><html><head><meta charset=utf-8"><title>Canvas</title></head><body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
[Code]....
Why Won't Canvas Graphics Get Rendered
Nov 3, 2011Why won't my canvas graphics get rendered?
[Code]...
Multiple Layers With The Canvas Tag?
Feb 13, 2011I'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.
View 2 Replies View Related