www.webdeveloper.com
Results 1 to 1 of 1

Thread: [RESOLVED] createLinearGradient with jQuery?

Threaded View

  1. #1
    Join Date
    Jan 2008
    Posts
    54

    resolved [RESOLVED] createLinearGradient with jQuery?

    I am messing around with canvas some but having a hard time getting my gradient to show. I am wondering if there is something in particular I am missing. If I do it in straight JavaScript it works fine but I am missing something trying it in jQuery. if someone spots it I'd be very grateful

    The coloring works fine, but the gradient doesn't, nor does it throw an error to firebug.

    Code:
    $(document).ready(function()
    		{
    			var canvas = $("#countdown");
    			var context = canvas.get(0).getContext("2d");
    			//var canvas 		= document.getElementById("countdown");
    			//var context 		= canvas.getContext("2d");
    		
    			//Background gradient for the top
    			var gradient = context.createLinearGradient(0,0,0,150);
    			gradient.addColorStop(0,"#F5F5F5");
    			gradient.addColorStop(0.25,"#DDD");
    			gradient.addColorStop(0.25,"#3F1732");
    			gradient.addColorStop(0.75,"#4E2340"); 
    			gradient.addColorStop(1,"#360C29");
    			context.fillStyle = gradient;
    			context.fillRect(0,0,180,150);
    			
    			});
    My canvas tag is as follows:

    Code:
    <canvas id="countdown" width="180" height="150">Default text</canvas>
    Last edited by halldorr; 07-21-2011 at 11:36 PM. Reason: added cavas code

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles