Dyalog MiServer 3 Sample Site

Here is a canvas with two shapes on it:

Please ignore this unrelated text.

:class canvasSimple: MiPageSample 
⍝ Control:: _html.canvas _html.script 
⍝ Description:: Bitmap image canvas and draw a picture using JavaScript 
 
    ∇ Compose 
      :Access public  
      Add'Here is a canvas with two shapes on it:' 
      Add _.br 
      '#mycanvas'Add _.canvas 
      
     ⍝ We need JavaScript to paint on the canvas: 
      Add _.script'var canvas = document.getElementById("mycanvas");' 
      Add _.script'var ctx = canvas.getContext("2d");' 
      
      Add _.script'ctx.fillStyle = "#D4A106";' 
      Add _.script'ctx.fillRect(50, 48, 49, 53);' 
      
      Add _.script'ctx.fillStyle = "#41706C";' 
      Add _.script'ctx.fillRect(10, 70, 70, 60);' 
      
      Add _.br 
      Add'Please ignore this unrelated text.' 
    ∇ 
     
:endclass 
 

Controls used on this page: Base HTML: br, canvas, script