locked
can not load canvas on my javascript pages. RRS feed

  • Question

  • User-605499000 posted

    I am trying to use canvas. I tried putting it in the javascript page and it works on page one but I need it to work on page 3.  I also tried to have a separate canvas and cannot open it on the javascript page of the magazine. The magazine uses javascript to open the pages.  Below is the javascript page that opens up the pages and also I have included the separate javascript feetmore that needs to get embeded into the javascript page.

    I have searched the web for an answer and can not find one.  I have to use the magazine javascript page and want to add canvas javascripts that have animation and games. Hope you can help me.  It is page 3 and 21.  I have left some other pages to show you what is done that works.  They have separate javascript pages.  

    I hope that you can help me.

    var issueNumber = 11;
    var issuePageCount = 40;
    var issuePageWidth = 512;
    var issuePageHeight = 600;
    var issueNextPage = 1;

    // ===============================================================================================
    // Page 4 - Falling Strawberries Choc choc    (  *this has a separate javascript page called movime and it works)
    // ===============================================================================================

    var chocCount = 15;
    var movimeChoc = null;
    var choc = new Array();
    var chocTimer = null;
    var currentChoc = 0;

    function BmStartChoc() {
    if (currentChoc >= 15)
    return;

    var y1 = Math.floor(Math.random() * 170 + 40) * (-1);
    var y2 = Math.floor(Math.random() * 20 + 250);
    var x1 = Math.floor(Math.random() * 390 + 10);

    choc[currentChoc].style.top = y1 + "px";
    choc[currentChoc].style.left = x1 + "px";

    movimeChoc.Insert(choc[currentChoc], 0, y2 - y1, movimeChoc.MovimeLike.StraitLine, 3500, false, false);
    movimeChoc.Start();

    currentChoc++;
    chocTimer = setTimeout("BmStartChoc()", Math.floor(Math.random() * 1000 + 1000));
    };

    function BmStopChoc() {
    movimeChoc.Clear();
    clearTimeout(chocTimer);
    chocTimer = null;
    currentChoc = 0;

    for (var sCnt = 0; sCnt < chocCount; sCnt++)
    choc[sCnt].style.top = "-40px";
    };

    //canvas test pg3\ This is loading on the first page but can't get it to open on page 3  * here is the first problem *
    (function () {

    var myCanvas = document.getElementById("myCanvas");
    var context = myCanvas.getContext("2d");

    var initialx=20;
    var finalx=200;
    var currentx=initialx;
    function draw() {
    context.clearRect(0, 0, 512, 600);
    context.fillRect(currentx, 20, 50, 50);
    if (currentx < finalx); {
    currentx = currentx + 1;
    }
    requestAnimationFrame(draw);
    }
    draw();

    })();

    //page-29 pet puzzle
    //
    var petpuzzleContainer = null;
    var PetpuzzleGame = null;
    //
    //Issue
    //

    Issue_IssueName = function () {
    return "Issue" + (issueNumber < 100 ? "0" : "") + (issueNumber < 10 ? "0" : "") + issueNumber.toString();
    };

    //
    //Load
    //

    function BmOnLoad() {

    //
    //settings
    //

    bmPageWidth = issuePageWidth;
    bmPageHeight = issuePageHeight;
    bmNextPage = issueNextPage;

    var pageUriTemplate = Issue_IssueName() + "/Pages/page-";

    for (var pg = 1; pg <= issuePageCount; pg++)
    bmPages[pg] = pageUriTemplate + (pg < 10 ? "0" : "") + pg.toString() + ".jpg";

    BmInitialize();


    AddIndexToJumpTo(1, "Cover");
    AddIndexToJumpTo(2, "Contents");
    AddIndexToJumpTo(4, "Little Ladebug Flight");
    AddIndexToJumpTo(6, "Ladybug Facts & Hidden object ");
    AddIndexToJumpTo(8, "Turtle Ate Too Much");
    AddIndexToJumpTo(16, "Turtle Facts & Lotto Game ");

    InsertDinamicDiv(2, "", "", 68, 100, 437, 18, "BmFlipTo(2)", "", "", "");
    InsertDinamicDiv(2, "", "", 68, 142, 437, 18, "BmFlipTo(4)", "", "", "");
    InsertDinamicDiv(2, "", "", 68, 165, 437, 18, "BmFlipTo(6)", "", "", "");
    InsertDinamicDiv(2, "", "", 68, 205, 437, 18, "BmFlipTo(8)", "", "", "");
    InsertDinamicDiv(2, "", "", 68, 230, 437, 18, "BmFlipTo(16)", "", "", "");

    // ===============================================================================================
    // Page 4 - Falling Strawberries Choc choc  *this is the rest of the movime javascript that works
    // ===============================================================================================

    movimeChoc = new Movime(10);

    for (var s = 0; s < chocCount; s++) {
    choc[s] = InsertDinamicDiv(4, "", "", 30, -40, 35, 35, "", "", "", "");
    choc[s].style.backgroundImage = "url(Issue011/Images/Choc" + (s % 5 + 1) + ".png)";
    }

    BmAddActionInOut(4, "BmStartChoc()", "BmStopChoc()");

    //pg3 test canvas loading on opening page but will not open on page 3 - what do I need to change or put in to get it to open. * here is problem 1#
    // pg 3 the error says the style will not open. I have taken it out but still nothing.
    InsertDinamicDivArea(3, "", "", 200, 200, 566, 660, "", "", "", "");
    InsertDinamicDivArea(3, style.backgroundImage = "url(Issue011/Pages/page-03.jpg)",);


    //page 21 feet move The javascript feet move will not open at all. I did not put anything in the front. Should I? *here is problem 2 the separate javascript file
    InsertDinamicDivArea(21, "", "", 200, 200, 512, 600, "", "", "", "");
    InsertDinamicDivArea(21, "url(Issue011/Canvas/feetmove.js");
    ///.....................
    //page 29 Pet puzzzle pet
    //.........

    petPuzzleContainer = InsertDinamicDiv(29, "petPuzzleContainer", "", 25, 94, 500, 560, "", "", "", "");
    petPuzzleGame = new Puzzle(petPuzzleContainer, 4, 5, "Issue011/games/PetPuzzle/piece-", 100, 102, 10, 200);
    InsertDinamicDiv(29, "", "", 48, 51, 42, 35, "PetPuzzleGame.Shuffle()", "", "", "");
    InsertDinamicDiv(29, "", "", 0, 0, 2, 2, "petPuzzleGame.Solve()", "", "", "");


    // Start
    //======

    BmStart();
    BmFlipTo(issueNextPage);

    }

    Here is the separate javascript canvas file  * simple animation using a spritsheet*

    (function() {

    var myCanvas = document.getElementById("myCanvas");
    var context = myCanvas.getContext("2d");

    var image = document.createElement("img");
    image.src = "Issue011/Images/footgrid.png";
    image.onload = "draw";

    var width = 239;
    var height = 278;
    var clipRegion = newPath2D();
    clipRegion.rect(200, 200, width, height);
    context.clip(clipRegion);

    var row = 0, col = 0;
    var fps = 10;
    var frameDuration = 1000/fps;


    function draw() {
    col = col + 1;
    if (col > 4) {
    row = 0;
    }
    if (col === 4 && row === 1) {
    col = 0;
    row = 0;

    context.drawImage(image, 239 - width) * col;
    context.drawImage(image, 238 - height) * row;

    }
    setTimeout(draw, frameDuration);
    }
    })();

    Thanks jen

    Friday, June 21, 2019 10:11 PM

Answers

  • User-605499000 posted

    Hi,

    Thanks for getting back to me. You can't open up the above javascript because there is another javascript program that opens it with the page turning and other things. The movime is another javascript that was written in 2009 and moves animation and also games.  There weren't spritesheets back then so I don't think it would work with spritesheets. I need to update the old javascript but wanted to go to canvas.

    I made changes and think that I am getting closer.  A blank image came on the page. You did give me some ideas to try.

    Thanks again and I will mark it as answered as you can't open the file.

    Jen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 25, 2019 1:07 AM

All replies

  • User839733648 posted

    Hi bumples18,

    I am trying to use canvas. I tried putting it in the javascript page and it works on page one but I need it to work on page 3.  I also tried to have a separate canvas and cannot open it on the javascript page of the magazine. The magazine uses javascript to open the pages.  Below is the javascript page that opens up the pages and also I have included the separate javascript feetmore that needs to get embeded into the javascript page.

    According to your description and code, I'm sorry that I could not reproduce your issue.

    I‘d like to ask that if there is any error or information when you use F12 developer tool to check?

    And some function you do not provide like Movime, what is that designed and what is it used to do? 

    Best Regards,

    Jenifer

    Monday, June 24, 2019 9:08 AM
  • User-605499000 posted

    Hi,

    Thanks for getting back to me. You can't open up the above javascript because there is another javascript program that opens it with the page turning and other things. The movime is another javascript that was written in 2009 and moves animation and also games.  There weren't spritesheets back then so I don't think it would work with spritesheets. I need to update the old javascript but wanted to go to canvas.

    I made changes and think that I am getting closer.  A blank image came on the page. You did give me some ideas to try.

    Thanks again and I will mark it as answered as you can't open the file.

    Jen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 25, 2019 1:07 AM