ABMCanvas is a HTML5 Canvas with Dragging possibilities. All drawing is done with ABMVCanvasObjects and supports almost all methods described in W3Schools.

// load images we will need in the canvases
page.AddCanvasImage("background", "../images/background.jpg")
page.AddCanvasImage("kyle", "../images/kyle.png")
page.AddCanvasImage("kenny", "../images/kenny.png")

// create canvas
Dim canvas1 As ABMCanvas
canvas1.Initialize(page, "canvas1", ABM.COLOR_BLACK, ABM.INTENSITY_NORMAL,1024,569, True)

// create background
Dim bg As ABMCanvasObject
bg.InitializeAsRectangle(page, "bg",0,0,1024,569,False)
bg.drawImage("background", 0,0)
canvas1.AddObject(bg)
Sub btn_Clicked(Target As String)
   Dim canvas1 As ABMCanvas = page.Component(2,1,"canvas1")
   Dim Kyle As ABMCanvasObject
   Dim x As Int = Rnd(0,1024-109)
   Dim y As Int = Rnd(0,569-136)
   kyleTeller=kyleTeller+1
   Kyle.InitializeAsRectangle(page, "kyle" & kyleTeller, x, y, 109,136, True)
   Kyle.drawImage("kyle", 0,0)
   canvas1.AddObject(Kyle)
   canvas1.refresh // IMPORTANT
End Sub

Sub canvas1_ObjectUp(objectId As String)
   myToastId = myToastId + 1	
   Dim ChangedTo As String
   Dim canvas1 As ABMCanvas = page.Component(2,1,"canvas1")
   Dim Kyle As ABMCanvasObject = canvas1.GetObject(objectId)
   If Kyle.Width = 109 Then
   	//changing the size to the new picture
   	Kyle.SetSize(98,129)
   	Kyle.Clear
   	Kyle.drawImage("kenny",0,0)
   	Kyle.Refresh // IMPORTANT
   	ChangedTo = "Kenny"
   Else
   	// changing the size to the new picture
   	Kyle.SetSize(109,136)
   	Kyle.Clear
   	Kyle.drawImage("kyle",0,0)
   	Kyle.Refresh // IMPORTANT
   	ChangedTo = "Kyle"
   End If

   canvas1.Refresh // IMPORTANT!

   page.ShowToast("toast" & myToastId, "toastred", objectId & " changed to " & ChangedTo & "!", 5000)
   End Sub

An example of the basic drawing functionalities on the ABMCanvas.

// the clock canvas
Dim canvas2 As ABMCanvas
canvas2.Initialize(page, "canvas2", ABM.COLOR_BLACK, ABM.INTENSITY_NORMAL, 300,300, False)

Dim clock As ABMCanvasObject = BuildClock
canvas2.AddObject(clock)

page.Cell(6,1).AddComponent(canvas2)
// check out the tutorial on W3Schools.com: http://www.w3schools.com/canvas/canvas_clock.asp
Sub BuildClock() As ABMCanvasObject
   Dim clock As ABMCanvasObject
   Dim Radius As Double = 150

   clock.InitializeAsRectangle(page, "clock", 0,0,300,300, True)

   Radius = Radius * 0.9

   // draw face
   clock.translate(150,150)
   clock.beginPath
   clock.arc(0,0,Radius, 0, 2*cPI)
   clock.fillStyleColor("#FFFFFF")
   clock.fill
   clock.strokeStyleRadialGradient(0,0,Radius*0.95,0,0,Radius*1.05, Array As Double(0,0.5,1), Array As String("#333", "white", "#333"))
   clock.lineWidth(Radius*0.1)
   clock.stroke()

   clock.beginPath
   clock.arc(0, 0, Radius*0.1, 0, 2*cPI)
   clock.fillStyleColor("#333")
   clock.fill

   //draw numbers
   clock.font("arial", Radius*0.15)
   clock.textBaseline(ABM.CANVAS_TEXTBASELINE_MIDDLE)
   clock.textAlign(ABM.CANVAS_TEXTALIGN_CENTER)
   Dim ang As Double
   For num = 1 To 12
   	ang = num * cPI / 6
   	clock.rotate(ang)
   	clock.translate(0, -Radius*0.85)
   	clock.rotate(-ang)
   	clock.fillText("" & num, 0, 0)
   	clock.rotate(ang)
   	clock.translate(0, Radius*0.85)
   	clock.rotate(-ang)
   Next

   // draw time
   Dim hour As Double = DateTime.GetHour(DateTime.Now)
   Dim minute As Double = DateTime.GetMinute(DateTime.Now)
   Dim second As Double = DateTime.GetSecond(DateTime.Now)
   hour = hour mod 12
   hour = (hour*cPI/6)+(minute*cPI/(6*60))+(second*cPI/(360*60))
   BuildHand(clock, hour, Radius*0.5, Radius*0.07)
   minute=(minute*cPI/30)+(second*cPI/(30*60))
   BuildHand(clock, minute, Radius*0.8, Radius*0.07)
   second=(second*cPI/30)
   BuildHand(clock, second, Radius*0.9, Radius*0.02)

   Return clock
End Sub

Sub BuildHand(clock As ABMCanvasObject, pos As Int, length As Double, width As Double)
   clock.beginPath
   clock.lineWidth(width)
   clock.lineCap(ABM.CANVAS_LINECAP_ROUND)
   clock.moveTo(0,0)
   clock.rotate(pos)
   clock.lineTo(0, -length)
   clock.stroke
   clock.rotate(-pos)
End Sub

ABMCanvas can be used to build your own controls.

// the control canvas
Dim canvas3 As ABMCanvas
canvas3.Initialize(page, "canvas3", ABM.COLOR_TRANSPARENT, ABM.INTENSITY_NORMAL, 1024,100, True)

Dim controlBar As ABMCanvasObject = BuildControlBar
canvas3.AddObject(controlBar)

Dim controlCircle As ABMCanvasObject = BuildControlCircle
canvas3.AddObject(controlCircle)
// the control canvas
Sub BuildControlBar() As ABMCanvasObject
   Dim cont As ABMCanvasObject
   cont.InitializeAsRectangle(page, "contbar", 0,0,1024,100,False)
   cont.beginPath
   cont.lineWidth(5)
   cont.lineCap(ABM.CANVAS_LINECAP_ROUND)
   cont.strokeStyleColor("#888888")
   cont.moveTo(20,47)
   cont.lineTo(1004,47)
   cont.stroke
   Return cont
End Sub

Sub BuildControlCircle() As ABMCanvasObject
   Dim cont As ABMCanvasObject
   cont.InitializeAsCircle(page, "contcirc", 50,48,40, True)
   // here we restrict the movement of the control so it only can me moved on the X-Axis 
   cont.SetDragZone(50,48,924,1)

   cont.beginPath
   cont.arc(0,0,40, 0, 2*cPI)
   cont.fillStyleColor("#000000")
   cont.fill
   cont.save
   cont.translate(-40,-40)
   cont.drawImage3("eric", 0,0,147,135,5,5, 70,64)
   cont.closePath
   cont.restore
   Return cont
End Sub

Sub canvas3_ObjectUp(objectId As String)
   // calculate value from position
   Dim canvas1 As ABMCanvas = page.Component(9,1,"canvas3")
   Dim Eric As ABMCanvasObject = canvas1.GetObject(objectId)
   Dim Pos As ABMPoint = Eric.GetPosition
   If Pos <> Null Then
     // map to 0 to 100: (our position - the dragzone left)/(dragzone width)*100
   	Dim value As Int = (Pos.x-50)/924*100
   	myToastId = myToastId + 1
   	page.ShowToast("toast" & myToastId, "toastred", "Eric is at value " & value, 5000)
   End If
End Sub