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()