When you say the IE emulation is 11 how are you setting that?

The Web Browser control runs in IE 7 mode by default and as such won't be able to run SVG or Canvas elements. You need to explicitly switch the browser into a later emulation.

There are two ways you can do this:

* Using meta headers in the HTML document
* Setting a registry setting for the host EXE


To set the HTML header use an HTML5 doc type and:

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />	 

This works for somethings and not for others. Not sure about Canvas/SVG support.

The better way IMHO is to make sure your application hosts the effective version you want to run with (IE11). You can do this by creating a key for your application in the Browser Emulation section of the registry:

HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION
Value Key: DWORD YourApplication.exe

You can find more info here:

https://weblog.west-wind.com/posts/2011/May/21/Web-Browser-Control-Specifying-the-IE-Version

+++ Rick ---

>Maybe someone can solve this old problem i encountered :(see image attached)
>I used Visual FoxPro to make some drawings with html5 canvas. VFP is OOP soft and uses same logic code than DOM.
> Here apie is an object created with internetexplorer.application. It can be also an activeX (browser)
>oleclass="Shell.explorer.2" embed on a vfp form.
>the IE emulation is IE11.
>
>With createElement I can build the html5 canvas: canvas=apie.document.createElement("ycanvas1").
>I test it okay (object,width,heigh,style..)
>I create the context 2d with :
>apie.document.getElementById("ycanvas1").getContext("2d")
>
>This is the complete code with FoxPro and JavaScript:
>
>

>Declare Integer BringWindowToTop In user32 Integer
>Declare Integer SetWindowText In user32 Integer HWnd, String lpstring
>Declare Integer Sleep In kernel32 Integer
>local apie
>apie=Newobject("internetexplorer.application")
>apie.Navigate("about:blank")
>sleep(500)
>
>With apie.Document
>ycanvas = .createElement("canvas")
>With ycanvas
>    .Id = "ycanvas1"
>    .Width=800
>    .Height=700
>    .Style.position = "absolute"
>    .Style.Border   = "1px solid"
>    .Style.zIndex="100"
>    .style.background="gray"
>    Endwith
>  .body.appendChild(ycanvas)
> Endwith
>
> sleep(2000)
>
>With apie
>
>*drawings from vfp here
>Local oo,canvas,ctx
>canvas=.Document.getElementById("ycanvas1")
>canvas.Style.background="bisque"
>*Messagebox( trans(canvas.width)+"  "+trans(canvas.height))
>ctx=canvas.getContext("2d")
>ctx.beginPath()
>
>ctx.lineWidth=5
>ctx.arc(100,100,80,0,2*Pi())
>ctx.strokeStyle="red"
>ctx.stroke()
>ctx.FillStyle="yellow"
>ctx.Fill()
>
>gradient=ctx.createLinearGradient(0,0,170,0)
>gradient.addColorStop("0","magenta")
>gradient.addColorStop("0.5","green")
>gradient.addColorStop("1.0","red")
>
>ctx.translate(200,0)
>ctx.strokeStyle=gradient
>ctx.lineWidth=5
>ctx.strokeRect(20,20,150,100)
>**************************
>ctx.translate(-100,0)
>ctx.Font="22px Georgia"
>ctx.FillStyle="green"
>ctx.fillText("Hello World! VFP",0,180)
>************************
> gradient=ctx.createLinearGradient(0,0,170,0)
> gradient.addColorStop("0","magenta")
> gradient.addColorStop("0.5","green")
> gradient.addColorStop("1.0","red")
>
>* Fill with gradient
>ctx.FillStyle=gradient
>ctx.lineWidth=5
>ctx.fillRect(20,210,150,100)
>
>******************************
>*javascript from here
>TEXT to m.myvar noshow
>var canvas=document.getElementById("ycanvas1");
>ctx=canvas.getContext("2d");
>
>ctx.translate(-100,350);
>ctx.beginPath();
>ctx.lineWidth="5";
>ctx.arc(100,100,80,0,2*Math.PI);
>ctx.strokeStyle="red";
>ctx.stroke();
>ctx.fillStyle="yellow";
>ctx.fill();
>
>var  gradient=ctx.createLinearGradient(0,0,170,0);
>gradient.addColorStop("0","magenta");
>gradient.addColorStop("0.5","green");
>gradient.addColorStop("1.0","red");
>
> ctx.translate(200,0);
> ctx.strokeStyle=gradient;
> ctx.lineWidth=5;
> ctx.strokeRect(20,20,150,100);
>//////////////////////////
>ctx.translate(-100,0);
>ctx.font="22px Georgia";
>ctx.fillStyle="green";
>ctx.fillText("Hello World! Javascript ",0,200);
>/////////////////////////
>gradient=ctx.createLinearGradient(0,0,170,0);
>gradient.addColorStop("0","magenta");
>gradient.addColorStop("0.5","green");
>gradient.addColorStop("1.0","red");
>// Fill with gradient
>ctx.fillStyle=gradient;
>ctx.lineWidth=5;
>ctx.fillRect(20,210,150,100);
>ENDTEXT
>
> With apie.Document
>    x=.createElement("SCRIPT")
>    x.Id="yscript"
>    T =.createTextNode(m.myvar)
>    x.appendChild(T)
>    .body.appendChild(x)
>Endwith
>Sleep(2000)
>
>.menubar=0
>.Toolbar=0
>.StatusBar=0
>.Height=680
>.Width=800
>.Left=(Sysmetric(1)-.Width)/2
>.Visible=.T.
>BringWindowToTop(.HWnd)
>SetWindowText(.HWnd, "Html5 canvas from VFP and from Javascript")
>Endwith
>

>
>
> Observations: with javascript all is ok but with vfp
> - The circle is not drawn at all
> - The gradient also (one color only).
> - The rectangle is drawn.
>why these diffrences ?
>