How to draw canvas in wordpress editor

3 Views

I am trying to draw canvas in wordpress editor.
In “Pages” with a custom made button for my plugin I can add the canvas using: 

wp.media.editor.insert('<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">canvas test </canvas>');

but when I am trying to draw something in the canvas it does not work.

Read More
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Georgia";
ctx.fillText("test", 90, 50);

I’m not sure why it cannot find the canvas in order to draw it.

Post Views: 3

Related posts

2 comments

  2. Ok, so I found the right way to do it.

    The editor in “Pages” and “Posts” is in an iframe.
    So this is the way to access and draw in the canvas:

        var iframe = document.getElementById('content_ifr');
    var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
    var canvas = innerDoc.getElementById('myCanvas');
    var ctx = canvas.getContext("2d");
    ctx.font = "30px Georgia";
    ctx.fillText("test", 90, 50);

Comments are closed.