cordova - Render Canvas element in Onsen UI Application -

I have onions UI and fabric. I am trying to create a hybrid mobile app with JS. I worked tasting and working separately with both libraries and both of them well suites my needs

The problem I am experiencing now is that it seems that the canvas is at all Not being sung! I tested that the scripts that are being created and maintained on the canvas are running and that is, but there is no rendering yet.

I will copy a part of the code to clarify this problem, if I can, I can post the hole app.

index.html

& lt; Script src = "lib / onsen / js / angular / angular.js" & gt; & Lt; / Script & gt; & Lt; Script src = "lib / onsen / js / onsenui.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" src = "js / jquery-2.1.1.min.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" src = "js / jquery.transit.min.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" src = "js / clothes.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" src = "js / spectrum.js" & gt; & Lt; / Script & gt; & Lt; Script src = "cordova.js" & gt; & Lt; / Script & gt; & Lt; Script src = "js / app.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" src = "js / darwScript.js" & gt; & Lt; / Script & gt; & Lt; / Head & gt; // The rest of the main HTML file ... & lt; Ons-template id = "drawTemp.html" & gt; & Lt; On-page & gt; & Lt; On-toolbar & gt; & Lt; Div class = "left" & gt; & Lt; On-back-button & gt; بازگشت & lt; / Ons-back-button & gt; & Lt; / Div & gt; & Lt; / On-toolbar & gt; & Lt; Canvas id = "c" width = "400" height = "400" style = "border: 1px solid crimson" & gt; & Lt; / Canvas & gt; & Lt; / On-page & gt; & Lt; / On-templates & gt;

darwScript.js

  $ (document) .ready (function () {var canvas = new clothes. "C"); canvas.laus scrolling = true; canvas.Setbackground collar ("# 000"); canvas.reader; now (); console.log ("drawing page load"); var text = new fabric. Text ("text "{Left: 150, top: 150}); canvas.add (text);}  

I tested with a text element and set the background color and did not do any work But the canvas element is there and an inline CSS

Thank you :)

I think the problem is that unless that page (template under templateTemp.html) is not started ...

You can add an ID for the page under that template:

& lt; Ons-template id = "drawTemp.html" & gt; & Lt; Ons-page id = "canvasPage" & gt;

... and copy that argument to copy (ready under the document) and see if it works?

  $ (document.body). ('Pageinit', '#canvasPage', function () {var canvas = new clothes.Canvs ("C"); canvas empty touch scrolling = true; canvas.Setbackgram coiler ("# 000"); canvas. (); Console ("text", {left: 150, top: 150}); canvas.ed (text);}  

P> edit

OK, so I went to canvasjs.com and grabbed an example and played with it. Here I have got to work:

I detected "postpash" Is because Navigator pushes the page on the stack And the canvas calls the script.

JAVASCRIPT

  ons.bootstrap (); Ons.ready (function () {myNavigator .on ('postpush', function) {loadChart ();})}} function load chart () {var chart = new CanvasJS.Chart ("chartcontenter", {theme: "Theme 2", // theme 1 title: {text: "Basic column chart - canvas js"}, data: [[Type type "bar", "splinearia", "field", "spline", "pie" etc.) type: "column", Data point: [{label: "apple", y: 10}, {label: "orange", y: 15}, {label: "banana", y: 25}, {label: "mango", Y: 30 }, {Label: "grapes" , Y: 28}]}]}); Chart.render (); }  

Check it out here: ''