IE Embedded Control Versioning (use IE9+ and HTML5 in a GUI)

[Ascend4nt]

IE Embedded Control Versioning

Use IE 9+ and HTML5 features inside a GUI

---

This UDF allows the use of embedded IE controls which support IE versions greater than IE 7.  By default, all embedded IE controls default to IE 7 compatibility mode (unless for some reason somebody has IE 6 installed!), so its not possible to use most of the HTML5 features available today. Fortunately, IE 9 and greater allow the use of HTML5, and the embedded IE control actually supports it.  The problem is convincing Windows to let your program actually use those features!

There are Registry branches that modify how an IE control works in specific programs.  Those branches are:

HKCU\Software\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION
HKLM\SOFTWARE\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION

In at least one of these branches, the executable name needs to appear as a value name ("autoit.exe" for example), and the value data needs to indicate what IE version to 'emulate'. The value data is actually dependent on the version and whether quirks-mode is enabled.

See Web Browser Control - Specifying the IE Version for more information.

Note that a 64-bit O/S needs adjustments to the HKLM paths.  Also, prefer the HKCU branch unless the program needs to enable access across all user accounts.

HTML5 Canvas Element Example

Anyway, all the complexity of setting the right value with the right name with the right 32/64-bit branch is handled for you in this UDF.  Enabling support for IE9+, and new HTML5 features, is as simple as making one call to _IE_EmbeddedSetBrowserEmulation().

_IE_EmbeddedSetBrowserEmulation() takes an executable name (@AutoItExe if none is provided), and checks the Registry for an entry for it.  If it doesn't find one, it will create one and enable support for later versions of IE. The full parameters to the function are as follows:

 

_IE_EmbeddedSetBrowserEmulation($nIEVersion, $bIgnoreDOCTYPE = True, $bHKLMBranch = False, $sExeName = @AutoItExe)

 

The parameter passed in $nIEVersion can be anything from 8 to 11 [or 12+ in the future], or just the current version of IE, which is available also through a call to _IE_EmbeddedGetVersion().  $bIgnoreDOCTYPE controls when IE will go into quirks mode based on any "<!DOCTYPE>" declarations on webpages. This mode can cause major problems, so by default it is set to ignore it (set this to False to enable it). $bHKLMBranch controls where in the registry the Browser Emulation Mode setting will be stored. If you wish to store the mode for ALL users, set this parameter to True. Note, however, that elevated privileges are required for modifying the HKLM branch!

If the call to _IE_EmbeddedSetBrowserEmulation() is successful, then you can enable a (more) HTML5 compliant IE browser control in a GUI.

The complete set of functions in the UDF:

_IE_EmbeddedGetVersion()            ; Gets version of IE Embeddable Control (from ieframe.dll or Registry)
_IE_EmbeddedGetBrowserEmulation()    ; Gets Browser Emulation Version for given Executable (or 0 if not found)
_IE_EmbeddedSetBrowserEmulation()    ; Sets Browser Emulation Version. NOTE: HKLM branch REQUIRES ELEVATED PRIVILEGES!

_

IMPORTANT:

Setting the embedded browser object to a newer version of IE may alter the behavior of some things.  See documenation for the HTMLDocumentEvents2 interface and HTMLAnchorEvents2 interface for example.

Also, there is at least one difference in behavior noted by mesale0077 in working with IE10 (and possibly other versions of IE) - clicks for elements inside an <a> anchor tag will register as the actual internal element rather than the surrounding anchor. For example, an <img> element wrapped by an <a> anchor will only send the click to the <img> element and not propagate it any further. A workaround for this is to check the parentNode to see if it is an <a> element. See the discussion in the >ObjEvent dont work thread. It could be that there's some other reason for this behavior, but nothing has come to light yet.

As an aside, also see trancexx's response in >ObjEvent usage for more techniques for capturing IE events.

History:

  Reveal hidden contents

2014-08-19:

Changed: UDF Renamed to IE_EmbeddedVersioning

Changed: Function _IE_EmbeddedSetBrowserEmulation() can be called with no parameters - in this case, it sets the Browser Emulation Flags to reflect the current installed version of IE

Updated: HTML5 Canvas demo

2014-08-19 Update 2:

Added: _IE_EmbeddedRemoveBrowserEmulation() per (pseudo-request) by mesale0077

Changed: _IE_EmbeddedGetBrowserEmulation() parameters are rearranged to match other function signatures

An example of HTML5 use, which has a little interactive Canvas, follows (requires IE9 or higher!):

 

expandcollapse popup

#include "IE_EmbeddedVersioning.au3"
; ===============================================================================================================================
; <IE_EmbeddedHTML5Example.au3>
;
; Example of using 'IE_EmbeddedVersioning' UDF
;
; This example 1st attempts to set the Browser Emulation information in the registry, then
; creates an embedded IE control with an interactive HTML5 Canvas element.
;
; Author: Ascend4nt
; ===============================================================================================================================

#Region IE_CANVAS_EXAMPLE

#include <GUIConstantsEx.au3>
#include <WindowsConstants.au3>
#include <IE.au3>

; -----------
; GLOBALS
; -----------

Global $bMouseDown = False, $iLastX1 = 0, $iLastY1 = 0
Global $g_oCanvas, $g_oCtx
Global $hGUI, $ctGUI_ErrMessageLabel
Global $GUI_IE_Obj


Global $nRet = _WinMain()
; Optionally remove valuename at Exit (not recommended if compiled to executable)
;~ _IE_EmbeddedRemoveBrowserEmulation()
Exit $nRet

; ======================================================================================================
; Embedded IE Browser-Emulation Fix + HTML5 Example
; ======================================================================================================

Func _WinMain()
    ConsoleWrite("@AutoItX64 = " & @AutoItX64 & ", IsAdmin() = " & IsAdmin() & @CRLF)

    ;; Get Current IE Embeddable Control Version (from ieframe.dll)
    Local $sIEVer = _IE_EmbeddedGetVersion(), $nIEVer = @extended
    ConsoleWrite("Embedded Version = " & $sIEVer & ", as Int: " & $nIEVer & ", @error = " & @error & @CRLF)

    ; Old IE version w/o HTML5 support? Exit
    If $nIEVer < 9 Then Return MsgBox(0, "Old IE Version", "IE version is less than 9, HTML5 example will not work")

    ;; Current Browser Emulation Mode for this executable (if exists)
    Local $nIEBEVer = _IE_EmbeddedGetBrowserEmulation()
    ConsoleWrite("GetEmbeddedVersion: " & $nIEBEVer & ", @error = " & @error & ", @extended = " & @extended & @CRLF)

    ;; Set Browser Emulation Mode for this executable (if not already set or set to a different version)
    ; HKCU Branch:
    _IE_EmbeddedSetBrowserEmulation()
    ; HKLM Branch:
    ;_IE_EmbeddedSetBrowserEmulation(-1, True, True)
    If @error Then
        ; -1 error means trying to access HKLM, so script needs elevation to access the Registry
        If @error = -1 Then
            If MsgBox(32 + 3, "Elevation Required", "Elevate script to enable setting Browser Emulation Mode?") = 6 Then Return _ReRunIfNotElevated()
            Return 1
        EndIf
        Return MsgBox(0, "Error", "Couldn't set Browser Emulation mode")
    EndIf

    ;Local $oErrorHandler = ObjEvent("AutoIt.Error", "_ErrFunc")

    ;; Create Embedded Browser Control and GUI
    Local $oIE = _IECreateEmbedded()

    ; GUI (vars are Global)
    $hGUI = GUICreate("Embedded Web control Test", 460, 360, -1, -1, $WS_OVERLAPPEDWINDOW + $WS_CLIPSIBLINGS + $WS_CLIPCHILDREN)
    $GUI_IE_Obj = GUICtrlCreateObj($oIE, 10, 10, 440, 340)
    $ctGUI_ErrMessageLabel = GUICtrlCreateLabel("", 100, 500, 500, 30)
    GUICtrlSetColor(-1, 0xff0000)

    GUISetState(@SW_SHOW) ;Show GUI

    ; Doesn't work (at least for keyboard focus):
    ;~ ControlFocus($hGUI, '', $GUI_IE_Obj)

    ;; Initialize Embedded Control and write some HTML5 data to it
    _IENavigate($oIE, 'about:blank' )

    ; Basic Near-Empty HTML (with minimal CSS styling for Canvas element)
    Local $sHTML = '<!DOCTYPE html>' & @CR & '<html>' & @CR & '<head>' & @CR & _
        '<meta content="text/html; charset=UTF-8" http-equiv="content-type">' & @CR & _
        '<title>Experiments</title>' & @CR & _
        '<style>canvas { display:block; background-color:white; outline:#00FF00 dotted thin;}</style>' & @CR & _
        '</head>' & @CR & '<body>' & @CR & '</body>' & @CR & '</html>'

    _IEDocWriteHTML($oIE, $sHTML)
    _IEAction($oIE, "refresh")

    ;; Setup Event Object Functions
    Local $oEventsDoc = ObjEvent($oIE.document, "Event_", "HTMLDocumentEvents2")
    #forceref $oEventsDoc

;~     ConsoleWrite("Obj Name = " & ObjName($oIE) & @CRLF)
;~     ConsoleWrite("Location = " & $oIE.document.location.pathname & @CRLF)

    ; --------------------------------------------------------------------------------------
    ; Create Canvas Element through the DOM (optionally just add it in the HTML5 above)
    ; -------------------------------------------------
    ; Note: Support in browsers, see "Can I use..."
    ;     @ http://caniuse.com/#feat=canvas
    ; and @ http://caniuse.com/#search=canvas
    ; -------------------------------------------------
    ; IE minimum is version 9+, 10+ has more features, but WebGL support requires version 11+
    ; --------------------------------------------------------------------------------------

    $g_oCanvas = $oIE.document.createElement("canvas")
    $g_oCanvas.id = "myCanvas"
;~     ConsoleWrite("Canvas ID = " & $g_oCanvas.id & @CRLF)
    $oIE.document.body.appendChild($g_oCanvas)

    ; Optionally, if added already through the HTML5 text:
    ;Local $g_oCanvas = _IEGetObjById($oIE, "myCanvas")

    If @error Then Return MsgBox(0, "Error", "Error creating/accessing Canvas")

    ;; Tweak Canvas Size, Move into View

;~     ConsoleWrite("window innerwidth = " & $oIE.document.parentWindow.innerWidth & @CRLF)
    ;$oIE.document.parentWindow.scrollTo(0, 10)
    $g_oCanvas.width = 420
    $g_oCanvas.height = 320
    ;ConsoleWrite("Canvas item offsetTop = " & $g_oCanvas.offsetTop & @CRLF)
    $g_oCanvas.scrollIntoView()

    ;; Grab the Canvas 2D Context
    $g_oCtx = $g_oCanvas.getContext("2d")

    ;; Example Drawing: Gradiant
    Local $oGrad = $g_oCtx.createLinearGradient(0,0,0,60)
    If IsObj($oGrad) Then
        $oGrad.addColorStop(0, "red")
        $oGrad.addColorStop(1, "blue")
        $g_oCtx.fillStyle = $oGrad
    EndIf
    $g_oCtx.fillRect(0,0,419,60)


    ;; Example Drawing: Text
    $g_oCtx.font = "30px serif"
    $g_oCtx.fillStyle = "white"
    $g_oCtx.textBaseline = "top"
    $g_oCtx.fillText("HTML5 Canvas Drawing!", 50, 10)

    ;; Example Drawing: Circle, Line
    $g_oCtx.beginPath()
    $g_oCtx.arc(200, 100, 20, 0, ACos(-1) * 2)
    $g_oCtx.fillStyle = "red"
    $g_oCtx.fill()

    $g_oCtx.beginPath()
    $g_oCtx.lineWidth = "3"
    $g_oCtx.strokeStyle = "green"
    $g_oCtx.moveTo(185, 85)
    $g_oCtx.lineTo(215, 115)
    $g_oCtx.stroke()

    ; Waiting for user to close the window
    While GUIGetMsg() <> $GUI_EVENT_CLOSE
        Sleep(10)
    WEnd

    GUIDelete()
EndFunc

; ======================================================================================================
; IE Event Functions - React to Mouse events with some Canvas graphics
; ======================================================================================================

#Region IE_EVENT_FUNCS

; For right-click, the context menu pops up, UNLESS we change the Event's 'returnValue' property
Volatile Func Event_oncontextmenu($oEvtObj)
    If IsObj($oEvtObj) Then
        ; Convert to string so that 0 doesn't match EVERY string
        Local $sId = $oEvtObj.srcElement.id & ""
        If ($sId = "myCanvas") Then $oEvtObj.returnValue = False
    EndIf
EndFunc

Volatile Func Event_onmousedown($oEvtObj)
    If IsObj($oEvtObj) And IsObj($g_oCtx) Then
        ; Map click coordinates to Canvas coordinates
        $iLastX1 = $oEvtObj.x - $g_oCanvas.offsetLeft
        $iLastY1 = $oEvtObj.y - $g_oCanvas.offsetTop
;~         ConsoleWrite("Downclick recvd at X1: " & $iLastX1 & ", Y1: " & $iLastY1 & ", MouseButton [1 = left, 2 = right, etc] = " & $oEvtObj.button & @CRLF)

        ; Check if click was in fact within Canvas element
        If $iLastX1 >= 0 And $iLastX1 < $g_oCanvas.width And $iLastY1 >= 0 And $iLastY1 < $g_oCanvas.height Then
            ; Signal mouse-down occurred inside Canvas
            $bMouseDown = 1
            ; Make a small square where initial down-click was detected
            $g_oCtx.fillStyle = "blue"
            $g_oCtx.fillRect($iLastX1 - 2, $iLastY1 - 2, 3, 3)
        EndIf
    EndIf
EndFunc

Volatile Func Event_onmouseup($oEvtObj)
    If IsObj($oEvtObj) And IsObj($g_oCtx) Then
;~         ConsoleWrite("MouseUp" & @LF)
        If $bMouseDown Then
            Local $iX = $oEvtObj.x - $g_oCanvas.offsetLeft, $iY = $oEvtObj.y - $g_oCanvas.offsetTop

            ; Random color in "#0f1100" (RGB) string form
            Local $sColor = "#" & Hex(Random(0, 255, 1), 2) & Hex(Random(0, 255, 1), 2) & Hex(Random(0, 255, 1), 2)

            ;; Draw either a line or circle depending on where the mouse button is released
            If $iX = $iLastX1 And $iY = $iLastY1 Then
                ; Circle if mouse start = mouse end
                $g_oCtx.beginPath()
                $g_oCtx.arc($iX, $iY, 8, 0, ACos(-1) * 2)
                $g_oCtx.fillStyle = $sColor
                $g_oCtx.fill()
            Else
                ; Line if mouse start <> mouse end
                $g_oCtx.beginPath()
                $g_oCtx.lineWidth = "3"
                $g_oCtx.strokeStyle = $sColor
                $g_oCtx.moveTo($iLastX1, $iLastY1)
                $g_oCtx.lineTo($iX, $iY)
                $g_oCtx.stroke()
            EndIf
            $bMouseDown = 0
        EndIf
    EndIf
EndFunc

Volatile Func Event_onkeydown($oEvtObj)
    If IsObj($oEvtObj) Then
        ConsoleWrite("Event type: " & $oEvtObj.type & "id (0 is document) = " & $oEvtObj.srcElement.id)
        ConsoleWrite(", keycode = " & $oEvtObj.keyCode & ", shiftkey = " & $oEvtObj.shiftKey & @CRLF)
    EndIf
EndFunc
; ======================================================================================================
#EndRegion IE_EVENT_FUNCS

#EndRegion IE_CANVAS_EXAMPLE

#Region UTIL_FUNCS
; ======================================================================================================
; Func _ReRunIfNotElevated()
;
; Does what it says. (rumored to occasionally say what it does)
;
; Author: Ascend4nt
; ======================================================================================================
Func _ReRunIfNotElevated()
    If IsAdmin() Then
        Return 0
    Else
        If @Compiled Then
            ; If compiled to A3X, we need to execute it as if not compiled.
            Local $sCmd = (@AutoItExe = @ScriptFullPath) ? "" : ("/AutoIt3ExecuteScript " & @ScriptFullPath)
            Return ShellExecute(@AutoItExe, $sCmd, @ScriptDir, "runas")
        Else
            Return ShellExecute(@AutoItExe,@ScriptFullPath,@ScriptDir,"runas")
        EndIf
    EndIf
EndFunc
#EndRegion UTIL_FUNCS

IEEmbeddedVersioning.zip ~prev Downloads: 61

Also, HTML5+Javascript standalone Canvas demo (should run in any browser): HTML5StandaloneCanvasDemo.zip

Edited August 25, 2014 by Ascend4nt

[JohnOne]

Cheers bud, pretty ace.

Any Idea why protected mode is turned off, and if so how to enable it?

EDIT: scrap that question Protected mode was not introduced until IE 8 I believe.

EDIT2: Discovered while the control is good for html5 it still will not handle flash games like those bingo or card games on the face book.

Edited August 14, 2014 by JohnOne

[Ascend4nt]

JohnOne, I'm not sure about Protected mode.  There may be a way to enable/disable it, but I haven't looked into it myself yet.

Also, I've just tested the control on a random flash game (from armorgames.com), and it worked fine.  Did you successfully login to facebook before trying to run those games?  Maybe there's some other incompatibility issue?

By the way, I'm using IE11 and the latest flash plugin for my tests.

[JohnOne]

I use IE 11 and have latest flash also.

It simply would not load any games I tried, including farmville, slingo bingo and others.

Just tried on IE normal and when entered game area got a security message about the content which I choose show all content.

Never seen this with UDF, could be related.

Edited August 14, 2014 by JohnOne

[Ascend4nt]

JohnOne, all the UDF does is set a value in the registry.  You can try experimenting with different IE versions if you like, or the DOCTYPE setting, etc.  As far as IE browser and security settings, I am not sure how that would be done programmatically.  But the UDF has nothing to do with that stuff

Also, I saw a message from mesale0077 earlier that I see he deleted (dude, stop deleting your posts!), referencing >his thread in General Help & Support.

Anyway, he solved the problem he was having by deleting the key, but really the problem stems from the fact that the HTMLDocumentEvents2 interface has changed starting IE11.  See MSDNs HTMLDocumentEvents2 interface page for information on the changes in IE11.  The workaround?  Either figure out how to work with the new interface, or set the Browser Emulation mode to IE 10 or lower.

Edit: Turns out the problem mesale0077 was having isn't related to the new IE11 event objects, but rather to the fact that the <a> anchor elements (without text) weren't registering as being clicked.  Moving the id="#" attributes to the <img> element (or even the <span> element) actually solves the problem.

Edit2: A better option was conceived: on a click, check the parentNode to see if it is an <a> anchor element and if so, what its id attribute is. (see the code in >this post).

Edited August 17, 2014 by Ascend4nt

[Ascend4nt]

Since everyone likes to look at pictures, I added one

Also, some changes:

2014-08-19:

Changed: UDF Renamed to IE_EmbeddedVersioning

Changed: Function _IE_EmbeddedSetBrowserEmulation() can be called with no parameters - in this case, it sets the Browser Emulation Flags to reflect the current installed version of IE

Updated: HTML5 Canvas demo

[mesale0077]

IE_EmbeddedVersioning.au3
mini changed
 
added
#include <Process.au3>
OnAutoItExitRegister("_IE_Embedded_unregistry")
 
 
 
Func _IE_Embedded_unregistry()
     RegDelete('HKEY_CURRENT_USERSoftwareMicrosoftInternet ExplorerMainFeatureControlFEATURE_BROWSER_EMULATION', _ProcessGetName(@AutoItPID))
  endfunc

Edited August 19, 2014 by mesale0077
Copied UDF code removed

[Ascend4nt]

  On 8/19/2014 at 1:15 PM, mesale0077 said:

IE_EmbeddedVersioning.au3

mini changed

added

#include <Process.au3>

OnAutoItExitRegister("_IE_Embedded_unregistry")

 

Func _IE_Embedded_unregistry()

     RegDelete('HKEY_CURRENT_USERSoftwareMicrosoftInternet ExplorerMainFeatureControlFEATURE_BROWSER_EMULATION', _ProcessGetName(@AutoItPID))

  endfunc

 

mesale0077, a 'feature request' might work better, than adding your own (flawed) code.  And why post the entire UDF? Please delete it from your post as it will not reflect the current and new versions of the UDF.

Anyway, even though you didn't really ask, I went ahead and added a 'Remove' function to the UDF, which actually works correctly for both HKCU and HKLM branches..

2014-08-19 Update 2:

Added: _IE_EmbeddedRemoveBrowserEmulation() per (pseudo-request) by mesale0077

Changed: _IE_EmbeddedGetBrowserEmulation() parameters are rearranged to match other function signatures

Update in 1st post

[Ascend4nt]

I suppose it might be of interest how the Canvas example would be done in Javascript, and how it compares to the AutoiIt script, so here's the html & Javascript code:

HTML:

<!DOCTYPE html>
<html>
 <head>
     <meta content="text/html; charset=UTF-8" http-equiv="content-type">
     <title>Experiments</title>
     <style>
         canvas { display:block; background-color:white; outline:#00FF00 dotted thin;}
     </style>     
    <script src="html5-canvas-click-example.js" type="text/javascript" language="javascript"></script>
 </head>
 <body>
    <!-- onevent="func()" attributes fail to pass event objects correctly in Firefox, so addEventListener() is used instead
    <canvas width=420 height=320 id="myCanvas" onmousedown="MouseDownCanv()" onmouseup="MouseUpCanv()" oncontextmenu="OnCanvCtxMenu()">
     -->
    <canvas width=420 height=320 id="myCanvas">
    If you are seeing this, your browser doesn't support HTML5 Canvas.
    </canvas>
 </body>
</html>

Javascript (named "html5-canvas-click-example.js"):

expandcollapse popup

// Simple interactive HTML5 Canvas demo
// Author: Ascend4nt (except MouseEventToCanvasCoords() by Mark Pilgrim)

// Globals
var g_Canvas, g_Ctx;
var g_LastX, g_LastY;
var g_bMouseDown = false;

// Canvas event coordinate transfer
// (from http://diveintohtml5.info/canvas.html)
// Author: Mark Pilgrim
function MouseEventToCanvasCoords(e, Canvas)
{
    var x, y;
    if (e.pageX != undefined && e.pageY != undefined) {
        x = e.pageX;
        y = e.pageY;
    }
    else {
        x = e.clientX + document.body.scrollLeft +
            document.documentElement.scrollLeft;
        y = e.clientY + document.body.scrollTop +
            document.documentElement.scrollTop;
    }
    x -= Canvas.offsetLeft;
    y -= Canvas.offsetTop;
    return [x, y];
}
// "oncontextmenu" handler for Canvas
function OnCanvCtxMenu(evt)
{
    evt = evt || window.event;    
    //console.log("Canvas Context-menu event");

    // Prevent the Default context menu from showing up:
    evt.preventDefault();
    evt.returnValue = false;    
}
// "onmousedown" handler for Canvas
// - Draws small box, records X, Y position -
function MouseDownCanv(evt)
{
    evt = evt || window.event;
    //var elem = evt.target || event.SrcElement;

    // evt.x doesn't work on Firefox:
    //g_LastX = evt.x - g_Canvas.offsetLeft;
    //g_LastY = evt.y - g_Canvas.offsetTop;
    var coords = MouseEventToCanvasCoords(evt, g_Canvas);
    g_LastX = coords[0];
    g_LastY = coords[1];
    
    //console.log("Mouse down recvd, X = " + g_LastX);
    
    g_bMouseDown = true;
    g_Ctx.fillStyle = "blue";
    g_Ctx.fillRect(g_LastX - 2, g_LastY - 2, 3, 3);
}
// "onmouseup" handler for Canvas
// - Draws either a line from last X, Y, or draws a circle if no movement -
function MouseUpCanv(evt)
{
    evt = evt || window.event;
    if (g_bMouseDown)
    {
        var coords = MouseEventToCanvasCoords(evt, g_Canvas);
        var x2 = coords[0], y2 = coords[1];
        
        // Assemble random color string
        // as a # followed by 3 hex pairs: "#1A2B3C"
        var sColor = "#";
        for (i = 0; i < 3; i++)
            sColor += Math.floor((Math.random() * 256)).toString(16);
        
        //console.log("Color = " + sColor);

        // Draw either a line or circle depending on where the mouse button is released
        if (x2 == g_LastX && y2 == g_LastY)
        {
            // Circle if mouse start = mouse end
            g_Ctx.beginPath();
            g_Ctx.arc(x2, y2, 8, 0, Math.PI * 2);
            g_Ctx.fillStyle = sColor;
            g_Ctx.fill();
        } else {
            // Line if mouse start <> mouse end
            g_Ctx.beginPath();
            g_Ctx.lineWidth = "3";
            g_Ctx.strokeStyle = sColor;
            g_Ctx.moveTo(g_LastX, g_LastY);
            g_Ctx.lineTo(x2, y2);
            g_Ctx.stroke();
        }
        g_bMouseDown = false;
    }    
}
// Main function (runs after page is loaded)
function main()
{
    //console.log("HTML loaded");
    
    // Get Canvas element and Context
    g_Canvas = document.getElementById("myCanvas");
    if (!g_Canvas) return;
    g_Ctx = g_Canvas.getContext("2d");
    if (!g_Ctx) return;   
    
    // Add event handlers (The onevent="func()" attributes work incorrectly
    // in Firefox [event objects aren't passed])
    // Also, older IE versions might need .attachEvent()
    g_Canvas.addEventListener("mousedown", MouseDownCanv, false);
    g_Canvas.addEventListener("mouseup", MouseUpCanv, false);
    g_Canvas.addEventListener("contextmenu", OnCanvCtxMenu, false);
    
    // Example Drawing: Gradient:    
    var Grad = g_Ctx.createLinearGradient(0,0,0,60);
    if (Grad)
    {
        Grad.addColorStop(0, "red");
        Grad.addColorStop(1, "blue");
        g_Ctx.fillStyle = Grad;
    }
    g_Ctx.fillRect(0,0,419,60);
     
    // Example Drawing: Text
    g_Ctx.font = "30px serif";
    g_Ctx.fillStyle = "white";
    g_Ctx.textBaseline = "top";
    g_Ctx.fillText("HTML5 Canvas Drawing!", 50, 10);
    
    // Example Drawing: Circle, Line
    g_Ctx.beginPath();
    g_Ctx.arc(200, 100, 20, 0, Math.PI * 2);
    g_Ctx.fillStyle = "red";
    g_Ctx.fill();

    g_Ctx.beginPath();
    g_Ctx.lineWidth = "3";
    g_Ctx.strokeStyle = "green";
    g_Ctx.moveTo(185, 85);
    g_Ctx.lineTo(215, 115);
    g_Ctx.stroke();
    
    // End main [event handlers will continue to run]
}

window.onload = main;

_

edit: see >1st post for the 'standalone' ZIP file with these 2 files inside

Edited August 25, 2014 by Ascend4nt

[mLipok]

Additional example is located here:

 

[lenclstr746]

so so so so thanks dude ❤️