Extensible canvas control in dynamics 365 for operations

Hi All,

Need help in extensible controls for dynamics 365 for operations.

I have created build and run time classes for creating the control and also written respective HTML and javascript.

This control is basically a canvas control.

As per customer requirement, we need to load a jpeg image on to canvas and use mark ups to design on that image.
Once this is done, we need to save this image.

But, as of now I am stuck with javascript of this canvas control as I am not able to bind javsacript logic with $dyn namespace in javasacript and data-dyn-bind in HTML due to lack of knowledge regarding this namespace and respective data binding attributes.

I tried searching for any source of document from Microsoft but could find any. Kindly, provide any documents related to $dyn and its respective classes and functions.

Please refer my below half cooked code in HTML and javascript

HTML code:-

<div id="signature">
<div class="rightside">

<canvas id="sketchpad" data-dyn-bind="style: {height: '300px', width: '400px'}, event: {load: $data.test}"></canvas>

<link data-dyn-css="/Resources/Styles/Sketch.css" rel="stylesheet" type="text/css">
<script data-dyn-script="/Resources/Scripts/Sketch.js"></script>
CSS file:-

/* Some CSS styling */
#sketchpadapp {
/* Prevent nearby text being highlighted when accidentally dragging mouse outside confines of the canvas */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

.leftside {
float: left;
width: 220px;
height: 285px;
background-color: #def;
padding: 10px;
border-radius: 4px;

.rightside {
float: left;
margin-left: 10px;

#sketchpad {
float: left;
border: 2px solid #888;
border-radius: 4px;
position: relative; /* Necessary for correct mouse co-ords in Firefox */
Js file

(function () {
'use strict';
$dyn.controls.Sketch = function (data, element) {
$dyn.ui.Control.apply(this, arguments);
$dyn.ui.applyDefaults(this, data, $dyn.ui.defaults.Sketch);
var self = this;

// Variables for referencing the canvas and 2dcanvas context
var canvas, ctx;

// Variables to keep track of the mouse position and left-button status
var mouseX, mouseY, mouseDown = 0;

// Draws a dot at a specific position on the supplied canvas name
// Parameters are: A canvas context, the x position, the y position, the size of the dot
function drawDot(ctx, x, y, size) {
// Let's use black by setting RGB values to 0, and 255 alpha (completely opaque)
r = 0; g = 0; b = 0; a = 255;

// Select a fill style
ctx.fillStyle = "rgba(" + r + "," + g + "," + b + "," + (a / 255) + ")";

// Draw a filled circle
ctx.arc(x, y, size, 0, Math.PI * 2, true);

// Clear the canvas context using the canvas width and height
function clearCanvas(canvas, ctx) {
clearRect(0, 0, canvas.width, canvas.height);

// Keep track of the mouse button being pressed and draw a dot at current location
function sketchpad_mouseDown() {
mouseDown = 1;
drawDot(ctx, mouseX, mouseY, 2);

// Keep track of the mouse button being released
function sketchpad_mouseUp() {
mouseDown = 0;

// Keep track of the mouse position and draw a dot if mouse button is currently pressed
function sketchpad_mouseMove(e) {
// Update the mouse co-ordinates when moved

// Draw a dot if the mouse button is currently being pressed
if (mouseDown == 1) {
drawDot(ctx, mouseX, mouseY, 2);

// Get the current mouse position relative to the top-left of the canvas
function getMousePos(e) {
if (!e)
var e = event;

if (e.offsetX) {
mouseX = e.offsetX;
mouseY = e.offsetY;
else if (e.layerX) {
mouseX = e.layerX;
mouseY = e.layerY;

// Set-up the canvas and add our event handlers after the page has loaded
self.test = function (event) {
// Get the specific canvas element from the HTML document
canvas = document.getElementById('sketchpad');

// If the browser supports the canvas tag, get the 2d drawing context for this canvas
if (canvas.getContext)
ctx = canvas.getContext('2d');

// Check that we have a valid context to draw on/with before adding event handlers
if (ctx) {
canvas.addEventListener('mousedown', sketchpad_mouseDown, false);
canvas.addEventListener('mousemove', sketchpad_mouseMove, false);
window.addEventListener('mouseup', sketchpad_mouseUp, false);