Html5 canvas samples part 5

Published on by Yousfi Benameur

I continue to bring some awesome and wonderfull samples with the html5 canvas class mainly with javascript codes picked and adapted from the web, mixed with visual foxpro codes.

This last is not able to traverse DOM coding to make some drawings (maybe someone gives me a solution, i wait yet...).Javascript is indicated to be the number one in canvas programing.

In preview  parts i indicated the method to

     -build canvas and any other element with DOM ( as in html)

     -build any script (javascript mainly) and run it form a vfp form or IE application.

    -make drawings and animations from vfp (with a simple timer) or from javascript(with setInterval  function)

the common point is the vfp activeX IE Browser (shell.explorer.2) or the interner explorer application.

 

 

 

This chapter have the follow summary (see the menu)

-clipping regions ( image,figur on canvas)
-draw random polygons (as stars on canvas)
-Make the canvas element  as fullscreen with web API
-Animated polygons(sun,stars)
-Wheels (animated)
-Save canvas as image with new method in Mspaint
-Working with interactive polygons
-Circular texts with gradients,..
-Texts with pattern as image or gradients with a specific font
-Images Shadows (transparent PNG is better)
-Animated rectangles
-Charts (pie chart,lines chart)
-11 Working examples with PaperJS free javascript library

For some examples internet must be connected to  access some web resources (images, http://paperjs.org/assets/js/paper.js..)

If the source are from author or site its pointed in the code.

Run ycanvas.prg, its associated with the ycanvas.mpr(if you modify the menu , recompile it as mpr mandatory).

Download the zip but warning you must have ALREADY  installed the ie EMULATION  (IE11 here) in REGISTRY, otherwise you see anything but errors returned.

See some screenshots below to be informed what the applicatio can do.

 

All is tested on Windows8.1 only.

*This is the main form to run the demo application.

*Begin code
Publi oform
oform=Newobject("ycanvas")
oform.Show
Read Events
Return
*

Define Class ycanvas As Form
    Height = 720
    Width = 897
    ShowWindow = 2
    AutoCenter = .T.
    Caption = "HTML5 CANVAS DRAWINGS"
    ystart = .F.
    xx = .0
    nf = 0
    t0 = 0
    ii = 0
    ncount = 0
    uu = 0

    Add Object olecontrol1 As OleControl With ;
        Oleclass="shell.explorer.2",;
        Top = 0, ;
        Left = 0, ;
        Height = 672, ;
        Width = 888, ;
        Anchor = 15, ;
        Name = "Olecontrol1"

    Add Object command24 As CommandButton With ;
        Top = 674, ;
        Left = 324, ;
        Height = 30, ;
        Width = 132, ;
        FontSize = 14, ;
        Anchor = 768, ;
        Caption = "Menu", ;
        MousePointer = 15, ;
        ForeColor = Rgb(255,0,0), ;
        BackColor = Rgb(0,255,0), ;
        Name = "Command24"

 

    Add Object timer8 As Timer With ;
        Top = 672, ;
        Left = 804, ;
        Height = 25, ;
        Width = 25, ;
        Enabled = .F., ;
        Interval = 100, ;
        Name = "Timer8"

    Procedure yremovescript
        Lparameters  xId
        Try
            script = Thisform.olecontrol1.Document.getElementById(xId)
            script.parentElement.removeChild(script)
            Thisform.olecontrol1.Document.body.innerhtml=""
            Thisform.olecontrol1.Refresh
        Catch
        Endtry
    Endproc

    Procedure ybuildcanvas
        Lparameters xwidth,xheight
        If Empty(xwidth)
            xwidth=Thisform.olecontrol1.Width
        Endi
        If Empty(xheight)
            xheight=Thisform.olecontrol1.Height
        Endi

        Local ycanvas,ctx
        Local ctx,w,h
        ycanvas=Null
        ctx=Null

        With Thisform.olecontrol1.Document
            ycanvas = .createElement("canvas")
            With ycanvas
                .Id = "ycanvas1"
                .Width=xwidth
                .Height=xheight
                .Style.position = "absolute"
                .Style.Border   = "1px solid"
                .Style.zIndex="100"
                .Style.background="gray"
            Endwith
            .body.appendChild(ycanvas)
        Endwith
        sleep(1000)
        Try
            ctx=ycanvas.getContext("2d")
            ctx.translate(0 ,0)
            ctx.setTransform(1,0,0,1,0,0)
            ctx.FillStyle = '000000'
            ctx.clearRect(0, 0, ycanvas.Width,ycanvas.Height)
        Catch
        Endtry
    Endproc

    Procedure ybuild
        Local m.myvar
        TEXT to m.myvar noshow
        <!doctype html>
        <html>
        <head>
        <script language="Javascript">
        //this code prevent rightclick
         document.addEventListener("contextmenu", function(e){
            e.preventDefault();
        }, false);
        </script>
        </head>
        <body bgcolor="black">
        </body></html>
        ENDTEXT
        Local m.lcdest
        m.lcdest=Addbs(Sys(2023))+"ytest.html"
        Strtofile(m.myvar, m.lcdest)
        Thisform.olecontrol1.Navigate(m.lcdest)
    Endproc


    Procedure Load
        Set Safe Off
        Declare Integer Sleep In kernel32 Integer
        Declare Integer BringWindowToTop In user32 Integer
    Endproc

    Procedure Init
        Publi m.yrep
        m.yrep=Addbs(Justpath(Sys(16,1)))
        Thisform.ii=0
        Thisform.ncount=0
        Thisform.SetAll("anchor",768,"commandbutton")
        Thisform.ybuild()
    Endproc

    Procedure Destroy
        ctx=Null
        Release ctx
        ycanvas=Null
        Release ycanvas
        dele file addbs(sys(2023)+"*.html"
        dele file addbs(sys(2023)+"stars.jpg"
        Clea Events
    Endproc

    Procedure Resize
        Thisform.olecontrol1.Resize()
    Endproc


    Procedure olecontrol1.Init
        This.silent=.T.
    Endproc

    Procedure command24.RightClick
        Do ycanvas.mpr
    Endproc

    Procedure command24.Click
        Do ycanvas.mpr
    Endproc


    Procedure timer8.Timer
        Thisform.uu=Thisform.uu+1
        If Thisform.uu>360
            This.Enabled=.F.
        Else
            Thisform.olecontrol1.Document.script.ydraw(Thisform.uu)
        Endi
    Endproc


Enddefine
*
*-- EndDefine: ycanvas

*End code

 

Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
Html5 canvas samples  part 5
To be informed of the latest articles, subscribe:
Comment on this post
C
I have read a few of the articles on your website now. and I really like your style of blogging. I added it to my favorites blog site list and will be checking back soon. Please check out my site as well and let me know what you think.
Reply
C
You have a good point here!I totally agree with what you have said!!Thanks for sharing your views...hope more people will read this article!!!
Reply