up vote 1 down vote favorite
share [fb]

I am using a jQuery carousel to display 38 different magnifications/positions of a large SVG image. I would ideally like to use some sort of loop to go through all the different sizes, draw to an individual canvas and place one in each of the li's in my carousel. Can anyone help me achieve this. Here's what I tried:

function drawSlides() {
    for (var i = 1; i <= 38; i++) {

    var currentCanvas = 'myCanvas_' + slideNumber;

    // initialise canvas element

    var canvas_i = document.getElementById('' + currentCanvas + '');
        var context = canvas_i.getContext('2d');

    // position of SVG – these measurements are subject to change!
    var destX_i = -6940;
    var destY_i = -29240;
    var destWidth_i = 9373;
    var destHeight_i = 30000;
    context.drawImage('/path/image.svg', 
       destX_i, destY_i, destWidth_i, destHeight_i);

    // white rectangle background  – these are constant
    var topLeftCornerX_i = 453;               
        var topLeftCornerY_i = -10;
    var width_i = 370;
    var height_i = 480;
    context.beginPath();
    context.rect(topLeftCornerX_i, topLeftCornerY_i, width_i, height_i);
    context.fillStyle = "rgba(255, 255, 255, 1)";
    context.fill();

    // orange vertical line – these elements are constant
    context.moveTo(453, 0);
    context.lineTo(453, 460);
    context.lineWidth = 2;
    context.strokeStyle = "#f5d7cb";
    context.stroke();

    //orange ball  – these are constant
    var centerX_ball_i = 453;
    var centerY_ball_i = 323;
    var radius = 99;
    context.beginPath();
    context.arc(centerX_ball_i, centerY_ball_i, radius, 0, 2 * Math.PI, false);
    var grd_ball_i = context.createLinearGradient(224, 354, 422, 552);
    grd_ball_i.addColorStop(0, "#f5d7cb"); // light orange
    grd_ball_i.addColorStop(1, "#ff4900"); // dark orange
    context.fillStyle = grd_ball_i;
    context.fill();
    }            
};

drawSlides();
link|improve this question
88% accept rate
You need to be more clear about the visual effect you are trying to achieve. – Phrogz Apr 6 at 22:46
Also providing a link to a jsfiddle.net setup with the code you have would be nice. – Jakub Hampl Apr 6 at 22:47
I am trying to populate a scrolling carousel (tinyCarousel) with 38 toggleable/scrolling slides each showing an image at a different size. As the main image i'm using is an SVG, I opted for embedding it within canvas. Does that make sense? – Dalogi Apr 6 at 22:51
1  
You posted the code you have - nice work - but since it doesn't stand on its own we can't test it, and you haven't explained what trouble you are having. Do you just need help procedurally creating 38 <canvas> elements, appending them to unique <li> elements, and drawing the same SVG image on each canvas? – Phrogz Apr 6 at 23:23
Yes, that's about the meat of it. Apologies for not including the complete code. It's part of a PHP page, and I'm not sure if it'll bug out. Anyway, the main hurdle I have is to figure out the logic of creating a loop that runs through 38 <li>s drawing a new canvas to each one. I'll figure it out somehow. Thanks for your comments and advice, and I'll bear your points in mind for future postings to SO :) – Dalogi Apr 7 at 7:16
feedback

1 Answer

up vote 0 down vote accepted

This should get you moving:

var numCarouselItems = 38;
var myUL  = document.getElementById('carousel');
var items = myUL.childNodes;
var img = new Image;
img.onload = function(){
  for (var i=0;i<numCarouselItems;++i){
    // Find the nth li, or create it
    var li = items[i] || myUL.appendChild(document.createElement('li'));

    // Find the nth canvas, or create it
    var canvas = li.getElementsByTagName('canvas')[0] ||
                 li.appendChild(document.createElement('canvas'));
    canvas.width  =   1; // Erase the canvas, in case it existed
    canvas.width  = 320; // Set the width and height as desired
    canvas.height = 240;
    var ctx = canvas.getContext('2d');

    // Use your actual calculations for the SVG size/position here
    ctx.drawImage( img, 0, 0 );
  }
}

// Be sure to set your image source after your load handler is in place
img.src = "foo.svg";
link|improve this answer
Thanks, man. I tried your code but couldn't get it to work, so I went back to the drawing board a little, and used some CSS to separate the images that weren't being drawn properly. Everything's working OK now, but I'm getting a "canvas is null" error, even though the canvas elements are OK. May start a new thread :S – Dalogi Apr 11 at 9:16
feedback

Your Answer

 
or
required, but never shown

Not the answer you're looking for? Browse other questions tagged or ask your own question.