insert HTML5 Canvas into Storyline as a web object

Hi, Shelley.

What is your specific LMS and version?  Can you share a screen capture of the error message you are receiving?  What about sharing a copy of your Story?

Thanks!

Here in an image of the test I am trying with the error. Getting the other info.

Here is the slide in Storyline I am working on trying to get the Canvas to work.

Or do know know of another way to have an area where the user can draw like on a white board?

When you test it locally are you using the same browser?

Still getting used to Storyline. I think I am looking at the correct file to test it locally.

The specific LMS and version - Inquisiq r3.

I just published it again and viewed it from there. It works fine there.

Do I need to add anything into the folder before sending to the LMS like with sounds for Flash files?

I inserted the Canvas HTML5 as a web object from my computer, not a web address.

Hi Shelley.

Web objects will often have issues being played back locally due to security restrictions. Your best bet is to test the content in the environment you are publishing for. So for LMS that would be to upload the content to the LMS and test it there.

My question was regarding which browser you are using to view course in. Firefox, Chrome, IE? Are you using the same browser when you view the course from your hard drive as when you launch it from the LMS?

Yes I am using the same browser.      IE

I uploaded to the LMS and that is where I am getting the error that Canvas is not supported.

Hmmm well the odd thing is that Canvas is an HTML5 element that should not be dependent on the server/LMS. Any chance you could share that bit of canvas code you are using?

IE doesnt support canvas unless you have installed the update, unless you are using IE9

Just a thought if you are using IE9, is your LMS forcing your browser into compatibility mode?

Phil you may be on to something there. If the LMS is putting the story.html in a frame and the outer HTML is forcing compatibility to IE8 that may be a issue. 

I have IE9.  Not sure if it is forcing it to convert to IE8?

Here is the code for Canvas.

Drawing

$( document ).ready( function() {
 var canvas = document.getElementById( 'canvas' );
 var context = null;
 
 if( canvas.getContext )
 {
  context = canvas.getContext( '2d' );
  
  $( '#canvas' ).mousedown( function( evt ){
   var offset = $( '#canvas' ).offset();
   

   context.clearRect( 0, 0, 300, 200);
   context.beginPath()
   context.moveTo( evt.pageX - offset.left, evt.pageY - offset.top);
   $( document ).mousemove( function( evt ){
    var offset = $( '#canvas' ).offset();
    
    context.lineTo( evt.pageX - offset.left, evt.pageY - offset.top);
    context.stroke();
   }).mouseup( function() {
    $( document ).unbind( 'mousemove' );
    $( document ).unbind( 'mouseup' );
   });
  });
 } else {
  alert( 'Canvas not supported' );
 }
} );

Sorry it converted the code. I'm more on the design side than the tech side.

I have the html file attached.

Shelley, if you can provide a screen capture that also shows the buttons to the right of the address bar, we can tell you if Compatibility View is enabled.

You are looking for the broken page icon to be depressed--this indicates that Compatibility View is enabled.

I am not seeing the broken page.

Hello again, Shelley.

I put together a Screenr Tutorial that discusses some possible ways that Compatibility View in Internet Explorer 9 could be preventing HTML5 elements from displaying within your LMS:

I hope this helps.  Please let us know if you make any progress.  Thanks!