Custom Objects

Introduction

The app features two main types of objects: Konva objects and Custom objects. Konva objects are objects rendered directly onto an HTML canvas by using the Konva.js 2d canvas library and they include: rectangles, ellipses, stars, triangles, lines, text, images, videos, and drawings. The second major type of object is the "custom" object which renders in it's own HTML div element and includes objects such as polls, timers, iFrames, inputs, games and other interactive objects. The custom objects are designed in such a way that you can create any type of React component and have them behave like a Konva object (they can be dragged/transformed, right clicked, cut/copy/pasted/deleted, edited, same render system etc). The goal with custom objects was to have a system where the programmer could just put their React components into a CustomWrapper.jsx component and have it work automatically like any other Konva object.

Custom Object

There are 3 main parts to how a custom object work: CustomWrapper/KonvaHtml,