MultiMedia

PictureBox: Drawing, text, images, sprites

The PictureBox control is a powerful container for images, drawing and text.

• Based on the HTML5 Canvas widget.

• Before you can output anything to a PictureBox, a context must be created:

pb = PictureBox1.getContext("2d")

• All drawing, images, etc. are done to the context.

• Declare the context variable globally if needed.

• There are really only 3 things you can do with a PictureBox: Everything else deals with the context:

getContext("2d")	Gets the drawing context. Returns the object that the PictureBox Context functions use. "2d" is currently the only valid argument.
refresh()	Redraws the entire PictureBox. Required after resizing the box or scrolling.
toDataURL(type)	Returns the current picturebox in a Base64 string image. If type is not specified, it is in PNG format. Type can also be "image/jpeg" or "image/gif".

Drawing

• Here are some of the drawing commands.
• More are listed in the full documentation

arc(x, y, radius, startAngle, endAngle, counterclockwise)	Adds an arc to the current path using a radius and specified angles(in radians).
arcTo(x1, y1, x2, y2, radius)	Adds an arc of a circle to the current sub path by using a radius and tangent points.
beginPath()	Creates a new path in the canvas and sets the starting point to the coordinate (0,0).
bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y)	Adds a cubic Bezier's curve to the current sub path using two control points.
clearRect(x, y, width, height)	Clears the specified rectangle region and makes it transparent.
closePath()	Closes an open path and attempts to draw a straight line from the current point to starting point of the path. The use of closePath() is optional.
fill()	Closes the current path and paints the area within it.
fillRect(x, y, width, height)	Draws a filled rectangle.
fillStyle	gradient|pattern
lineCap	Sets style of end caps for a line. "butt", "round" or "square".
lineJoin	Set style where two lines meet. "bevel", "round" or "mitre".
lineWidth	The current line width, in pixels.
lineTo(x, y)	Adds a line segment from the current point to the specified coordinate.
rect(x, y, width, height)	Adds a rectangle.
stroke()	Actually draws the path you have defined
strokeRect(x, y, width, height)	Draws a rectangular outline.
strokeStyle	gradient|pattern
strokeText(text, x, y, maxWidth)	Draws text (with no fill) on the canvas.

• Here is an example of some drawing:

  'start by setting our colors.
  pb.strokeStyle = vbBlack
  pb.fillStyle = vbRed
  'Now, we define the lines we want to draw in a path.
  pb.beginPath()
  pb.arc(150,150,50,0,Math.PI*2,True)
  pb.closePath()
  'Path is complete: draw it
  pb.stroke()
  'and paint the area inside the path
  pb.fill()

Text

• Here are the text functions

fillText(text, x, y)	Writes text using current settings of font, textAlign and textBaseline.
font	The font to use for text. It is a string with three parts: "style size fontname". style can be normal, italic or bold. Example: "italic 40px Calibri"
measureText(text)	Returns a rectangle object with text's size.
strokeText(text, x, y, maxWidth)	Draws text (with no fill) on the canvas.
textAlign	Controls text alignment. Possible values are start, end, left, right and center.
textBaseline	Controls where the text is drawn relative to the starting point. Possible values are top, hanging, middle, alphabetic, ideographic and bottom.
style(x, y, width, height)	Any valid style string.

• Here is some sample code

  pb.textBaseline = "top"
  pb.font="16px sans-serif"
  pb.fillText("This is a picturebox",100,0)  

Images

• Images are loaded asynchronously, since they may take time to load.
• A global image object needs to be created to load the image into.
• When load is complete, a function with the image object _onload is called.
• It can then be drawn on the PictureBox.

myImage=new Image()

• Here are the image functions:

createImageData(width, height)	Creates a new, blank ImageData object.
drawImage(image, x, y, width, height)	Draw an image.
getImageData(x,y,height,width)	Return the image data for a portion of the image. Includes width, height, data array [rgba].
globalCompositeOperation(source-over, source-atop, source-in, source-out, destination-over, destination-atop, destination-in, destination-out, lighter, copy, xor )	Sets or returns how a source (new) images are drawn onto a destination (existing) image.
putImageData(imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight)	Puts the image data (from a specified ImageData object) back onto the canvas.

• Here is how the code looks:

myImage=new Image()
Function Button3_onclick()
  'Set the image. When it finishes loading, Image1_onload will be called.
  myImage.src="mario.jpg"  
End Function

Function myImage_onload()
  pb.drawImage(myImage,0,0)
End Function

• Do not set the image in global code - the PictureBox will not be ready.
• Doing so in Sub Main or a button is fine.

Sprites

• PictureBoxes can be moved on the screen so they act as sprites
• Here we move the complete PictureBox and flip it upside down.

  PictureBox1.Left=PictureBox1.Left+5
  PictureBox1.style.webkitTransform="rotate(180deg)"

• Animate a sprite by using a SetTimeout function to be run every few milliseconds.

  SetTimeout("moveMario()",10)

Multimedia

The Audio control is used to play sounds.

• Sound files can be any common format, including mp3, ogg, uncompressed wav and aac.

Here are some options for it:

autoplay	Audio will start playing as soon as ready. Not supported on iOS.
controls	Controls will be displayed, such as a Play.
loop	Audio will start over again when finished.
preload	Audio should be loaded when the page loads. Ignored if autoplay is present.
src	The name of the file. For example, Super.wav. It can be in the project folder or on a website.

Audio

Function Button1_onclick()
  Audio1.play()
End Function

Video

Function Button2_onclick()
  Video1.play()
End Function