Problem adding canvas ( fabric.js) inside an iframe

Question

0.00/5 (No votes)

See more:

Hello, please can someone help me solve the problem adding canvas with fabric.js inside an iframe.

I have a button that allows me to add rectangles to a canvas. I created the canvas object with fabric.js that I added inside an iframe despite all the tests I did but it doesn't work.  Can someone help me solve this problem please?

Errors I get:

Error 1:

Error 1VM6034:32Uncaught TypeError: Cannot read property 'add' of null    at Add (<anonymous>:32:12)    at HTMLButtonElement.onclick ((index):1)

Error 2:

VM6034:36Uncaught TypeError: fabric.Control is not a constructor    at <anonymous>:36:52    at Object.coreUtilsModule.executeScripts(coreUtils.js:304)    atHTMLScriptElement.newScript.onload.newScript.onerror (coreUtils.js:288)

What I have tried:

HTML

<html><head>
  <meta charset="utf-8"/>

<title>monfabrick</title>
<script src="fabric.min.js"></script>

<script type="text/javascript">

var iframeDocument = document.getElementById('myiframe').contentWindow.document;
var canvas = iframeDocument.getElementById('c');
var fabricCanvas = new fabric.Canvas(canvas);


    	//var canvas = this.__canvas = new fabric.Canvas('c');
	// create a rect object
  var deleteIcon = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";

  var img = document.createElement('img');
  img.src = deleteIcon;

  fabric.Object.prototype.transparentCorners = false;
  fabric.Object.prototype.cornerColor = 'blue';
  fabric.Object.prototype.cornerStyle = 'circle';

  function Add() {
    var rect = new fabric.Rect({
      left: 100,
      top: 50,
      fill: 'yellow',
      width: 200,
      height: 100,
      objectCaching: false,
      stroke: 'lightgreen',
      strokeWidth: 4,
    });

    canvas.add(rect);
    canvas.setActiveObject(rect);
  }

  fabric.Object.prototype.controls.deleteControl = new fabric.Control({
    x: 0.5,
    y: -0.5,
    offsetY: 16,
    cursorStyle: 'pointer',
    mouseUpHandler: deleteObject,
    render: renderIcon,
    cornerSize: 24
  });

  Add();

  function deleteObject(eventData, target) {
		var canvas = target.canvas;
		    canvas.remove(target);
        canvas.requestRenderAll();
	}

  function renderIcon(ctx, left, top, styleOverride, fabricObject) {
    var size = this.cornerSize;
    ctx.save();
    ctx.translate(left, top);
    ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
    ctx.drawImage(img, -size/2, -size/2, size, size);
    ctx.restore();
  }
    	</script>
    	
   <style type="text/css" >
 
    	  .controls {
  	display: inline-block;
  }

</style>

</head>

<body>
<div class="controls">
    <p>
      <button id="add" onclick="Add()">Add a rectangle</button>
    </p>
  </div>

 <iframe id="myiframe" width="400" height="400"  src="http://localhost:7007/mapage/" name="moniframe" contenteditable="true" class="embed-responsive-item" allowfullscreen> </iframe>
 </body></html>

Posted 22-Jul-20 1:27am

Member 11837260

Updated 25-Aug-20 8:35am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tammy Diprima · Accepted Answer · 2020-08-25T08:35:00

The

fabric.Control is not a constructor

issue has to do with the version of fabric.js that you are using.
The error does not occur with

version: "4.1.0"

Get the script tag here

The

Cannot read property 'add' of null

error is occurring because your

iframeDocument.getElementById('c');

is handing back a null. So... does the document in the iframe contain a canvas with id='c'?

If it does, then where you're getting the iframe document, maybe try like this?

var iframe = document.getElementById('myiframe');
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

Good luck!