<!DOCTYPE html>
<html>
<head>
<title>Drawing Arcs</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='640' height='480'></canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
S(canvas).background = 'lightblue'
context.lineWidth = 2
context.strokeStyle = 'blue'
Math.degreesToRadians = function(degrees)
{
return degrees * Math.PI / 180
}
// Following is the original example code
//
// arcs =
// [
// Math.PI,
// Math.PI * 2,
// Math.PI / 2,
// Math.PI / 180 * 59
// ]
//
// Below the code now uses degrees as arguments
arcs =
[
Math.degreesToRadians(180),
Math.degreesToRadians(360),
Math.degreesToRadians(90),
Math.degreesToRadians(59)
]
for (j = 0 ; j < 4 ; ++j)
{
context.beginPath()
context.arc(80 + j * 160, 80, 70, 0, arcs[j])
context.closePath()
context.stroke()
}
context.strokeStyle = 'red'
for (j = 0 ; j < 4 ; ++j)
{
context.beginPath()
context.arc(80 + j * 160, 240, 70, 0, arcs[j])
context.stroke()
context.closePath()
}
context.strokeStyle = 'green'
for (j = 0 ; j < 4 ; ++j)
{
context.beginPath()
context.arc(80 + j * 160, 400, 70, 0, arcs[j], true)
context.stroke()
context.closePath()
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Clipping Areas (b)</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='640' height='480'></canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
S(canvas).background = 'lightblue'
context.fillStyle = 'white'
context.strokeRect(20, 20, 600, 440) // Black border
context.fillRect( 20, 20, 600, 440) // White background
context.beginPath()
for (j = 0 ; j < 10 ; ++j)
{
context.moveTo(20, j * 48)
context.lineTo(620, j * 48)
context.lineTo(620, j * 48 + 30)
context.lineTo(20, j * 48 + 30)
}
context.clip()
context.closePath()
context.fillStyle = 'blue' // Blue sky
context.fillRect(20, 20, 600, 320)
context.fillStyle = 'green' // Green grass
context.fillRect(20, 320, 600, 140)
context.strokeStyle = 'orange'
context.fillStyle = 'yellow'
orig = 170
points = 21
dist = Math.PI / points * 2
scale1 = 130
scale2 = 80
context.beginPath()
for (j = 0 ; j < points ; ++j)
{
x = Math.sin(j * dist)
y = Math.cos(j * dist)
context.lineTo(orig + x * scale1, orig + y * scale1)
context.lineTo(orig + x * scale2, orig + y * scale2)
}
context.closePath()
context.stroke() // Sun outline
context.fill() // Sun fill
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Clipping Areas (a)</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='640' height='480'></canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
context.beginPath()
for (j = 0 ; j < 10 ; ++j)
{
context.moveTo(20, j * 48)
context.lineTo(620, j * 48)
context.lineTo(620, j * 48 + 30)
context.lineTo(20, j * 48 + 30)
}
context.stroke()
context.closePath()
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Filling a Path</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='320' height='320'></canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
S(canvas).background = 'lightblue'
context.strokeStyle = 'orange'
context.fillStyle = 'yellow'
orig = 160
points = 21
dist = Math.PI / points * 2
scale1 = 150
scale2 = 80
context.beginPath()
for (j = 0 ; j < points ; ++j)
{
x = Math.sin(j * dist)
y = Math.cos(j * dist)
context.lineTo(orig + x * scale1, orig + y * scale1)
context.lineTo(orig + x * scale2, orig + y * scale2)
}
context.closePath()
context.stroke()
context.fill()
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Drawing Lines</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='535' height='360'></canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
S(canvas).background = 'lightblue'
context.fillStyle = 'red'
context.font = 'bold 13pt Courier'
context.strokeStyle = 'blue'
context.textBaseline = 'top'
context.lineWidth = 20
caps = ['butt', 'round', 'square']
joins = ['round', 'bevel', 'miter']
for (j = 0 ; j < 3 ; ++j)
{
for (k = 0 ; k < 3 ; ++k)
{
context.lineCap = caps[j]
context.lineJoin = joins[k]
context.fillText(' cap:' + caps[j], 33 + j * 180, 45 + k * 120)
context.fillText('join:' + joins[k], 33 + j * 180, 65 + k * 120)
context.beginPath()
context.moveTo( 20 + j * 180, 100 + k * 120)
context.lineTo( 20 + j * 180, 20 + k * 120)
context.lineTo(155 + j * 180, 20 + k * 120)
context.lineTo(155 + j * 180, 100 + k * 120)
context.stroke()
context.closePath()
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Filling Text</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='800' height='160'></canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
context.font = 'bold 140px Times'
context.textBaseline = 'top'
image = new Image()
image.src = 'wicker.jpg'
image.onload = function()
{
pattern = context.createPattern(image, 'repeat')
context.fillStyle = pattern
context.fillText( 'WickerpediA', 0, 0)
context.strokeText('WickerpediA', 0, 0)
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Using Text</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='800' height='160'></canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
context.font = 'bold 140px Times'
context.textBaseline = 'top'
context.strokeText('WickerpediA', 0, 0)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Pattern Fill</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='640' height='240'></canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
S(canvas).background = 'lightblue'
image = new Image()
image.src = 'image.png'
image.onload = function()
{
pattern = context.createPattern(image, 'repeat')
context.fillStyle = pattern
context.fillRect(20, 20, 600, 200)
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>A Stretched Radial Gradient</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='640' height='240'></canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
S(canvas).background = 'lightblue'
gradient = context.createRadialGradient(0, 120, 0, 480, 120, 480)
gradient.addColorStop(0.00, 'red')
gradient.addColorStop(0.14, 'orange')
gradient.addColorStop(0.28, 'yellow')
gradient.addColorStop(0.42, 'green')
gradient.addColorStop(0.56, 'blue')
gradient.addColorStop(0.70, 'indigo')
gradient.addColorStop(0.84, 'violet')
context.fillStyle = gradient
context.fillRect(20, 20, 600, 200)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>A Radial Gradient</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='640' height='240'></canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
S(canvas).background = 'lightblue'
gradient = context.createRadialGradient(320, 120, 0, 320, 120, 320)
gradient.addColorStop(0.00, 'red')
gradient.addColorStop(0.14, 'orange')
gradient.addColorStop(0.28, 'yellow')
gradient.addColorStop(0.42, 'green')
gradient.addColorStop(0.56, 'blue')
gradient.addColorStop(0.70, 'indigo')
gradient.addColorStop(0.84, 'violet')
context.fillStyle = gradient
context.fillRect(20, 20, 600, 200)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Multiple Color Stops</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='640' height='240'></canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
S(canvas).background = 'lightblue'
gradient = context.createLinearGradient(0, 0, 640, 0)
gradient.addColorStop(0.00, 'red')
gradient.addColorStop(0.14, 'orange')
gradient.addColorStop(0.28, 'yellow')
gradient.addColorStop(0.42, 'green')
gradient.addColorStop(0.56, 'blue')
gradient.addColorStop(0.70, 'indigo')
gradient.addColorStop(0.84, 'violet')
context.fillStyle = gradient
context.fillRect(20, 20, 600, 200)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Different Gradient Angles</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='640' height='240'></canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
S(canvas).background = 'lightblue'
gradient = context.createLinearGradient(0, 0, 160, 0)
gradient.addColorStop(0, 'white')
gradient.addColorStop(1, 'black')
context.fillStyle = gradient
context.fillRect(20, 20, 135, 200)
gradient = context.createLinearGradient(0, 0, 0, 240)
gradient.addColorStop(0, 'yellow')
gradient.addColorStop(1, 'red')
context.fillStyle = gradient
context.fillRect(175, 20, 135, 200)
gradient = context.createLinearGradient(320, 0, 480, 240)
gradient.addColorStop(0, 'green')
gradient.addColorStop(1, 'purple')
context.fillStyle = gradient
context.fillRect(330, 20, 135, 200)
gradient = context.createLinearGradient(480, 240, 640, 0)
gradient.addColorStop(0, 'orange')
gradient.addColorStop(1, 'magenta')
context.fillStyle = gradient
context.fillRect(485, 20, 135, 200)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Filling with Gradients</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='640' height='240'></canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
S(canvas).background = 'lightblue'
context.fillStyle = 'blue'
context.strokeStyle = 'green'
context.fillRect( 20, 20, 600, 200)
context.clearRect( 40, 40, 560, 160)
context.strokeRect(60, 60, 520, 120)
gradient = context.createLinearGradient(0, 80, 640,80)
gradient.addColorStop(0, 'white')
gradient.addColorStop(1, 'black')
context.fillStyle = gradient
context.fillRect(80, 80, 480,80)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Drawing Rectangles</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='640' height='240'></canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
S(canvas).background = 'lightblue'
context.fillStyle = 'blue'
context.strokeStyle = 'green'
context.fillRect( 20, 20, 600, 200)
context.clearRect( 40, 40, 560, 160)
context.strokeRect(60, 60, 520, 120)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Copying a Canvas</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='320' height='240'>
This is a canvas element given the ID <i>mycanvas</i>
This text is only visible in non-HTML5 browsers
</canvas>
<img id='myimage'>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
context.fillStyle = 'red'
S(canvas).border = '1px solid black'
context.beginPath()
context.moveTo(160, 120)
context.arc(160, 120, 70, 0, Math.PI * 2, false)
context.closePath()
context.fill()
S('myimage').border = '1px solid black'
O('myimage').src = canvas.toDataURL()
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>The HTML5 Canvas</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='320' height='240'>
This is a canvas element given the ID <i>mycanvas</i>
This text is only visible in non-HTML5 browsers
</canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
context.fillStyle = 'red'
S(canvas).border = '1px solid black'
context.beginPath()
context.moveTo(160, 120)
context.arc(160, 120, 70, 0, Math.PI * 2, false)
context.closePath()
context.fill()
</script>
</body>
</html>
function O(i) { return typeof i == 'object' ? i : document.getElementById(i) }
function S(i) { return O(i).style }
function C(i) { return document.getElementsByClassName(i) }
<!DOCTYPE html>
<html>
<head>
<title>Skewing</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='500' height='140'></canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
S(canvas).background = 'lightblue'
myimage = new Image()
myimage.src = 'image.png'
myimage.onload = function()
{
context.drawImage(myimage, 20, 20)
context.transform(1, 0, 1, 1, 0, 0)
context.drawImage(myimage, 140, 20)
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Rotating (b)</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='500' height='140'></canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
S(canvas).background = 'lightblue'
myimage = new Image()
myimage.src = 'image.png'
myimage.onload = function()
{
w = myimage.width
h = myimage.height
for (j = 0 ; j < 4 ; ++j)
{
context.save()
context.translate(20 + w / 2 + j * (w + 20), 20 + h / 2)
// Alternative to the above using transform()
// context.transform(1, 0, 0, 1, 20 + w / 2 + j * (w + 20), 20 + h / 2)
context.rotate(Math.PI / 5 * j)
context.drawImage(myimage, -(w / 2), -(h / 2))
context.restore()
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Rotating (a)</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='500' height='280'></canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
S(canvas).background = 'lightblue'
myimage = new Image()
myimage.src = 'image.png'
myimage.onload = function()
{
for (j = 0 ; j < 4 ; ++j)
{
context.drawImage(myimage, 20 + j * 120 , 20)
context.rotate(Math.PI / 25)
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Scaling</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='420' height='200'></canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
S(canvas).background = 'lightblue'
myimage = new Image()
myimage.src = 'image.png'
myimage.onload = function()
{
context.drawImage(myimage, 0, 0)
context.scale(3, 2)
// Alternative to above using transform()
// context.transform(3, 0, 0, 2, 0, 0)
context.drawImage(myimage, 40, 0)
context.scale(.33, .5)
context.drawImage(myimage, 0, 100)
// Improved version using save() and restore()
//
// context.drawImage(myimage, 0, 0)
// context.save()
// context.scale(3, 2)
// context.drawImage(myimage, 40, 0)
// context.restore()
// context.drawImage(myimage, 0, 100)
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Compositing</title>
<script src='OSC.js'></script>
<style>
.compositing {
font-family:'courier new';
font-size :9pt;
}
</style>
</head>
<body>
<div class='compositing'>
<canvas class='canvas' id='c1' width='120' height='120'></canvas>
<canvas class='canvas' id='c2' width='120' height='120'></canvas>
<canvas class='canvas' id='c3' width='120' height='120'></canvas>
<canvas class='canvas' id='c4' width='120' height='120'></canvas>
<br>
source-over
source-in source-out
source-atop<br>
<canvas class='canvas' id='c5' width='120' height='120'></canvas>
<canvas class='canvas' id='c6' width='120' height='120'></canvas>
<canvas class='canvas' id='c7' width='120' height='120'></canvas>
<canvas class='canvas' id='c8' width='120' height='120'></canvas>
<br>
destination-over destination-in
destination-out destination atop<br>
<canvas class='canvas' id='c9' width='120' height='120'></canvas>
<canvas class='canvas' id='c10' width='120' height='120'></canvas>
<canvas class='canvas' id='c11' width='120' height='120'></canvas>
<canvas class='canvas' id='c12' width='120' height='120'></canvas>
<br>
lighter
darker
copy
xor
</div>
<script>
image = new Image()
image.src = 'image.png'
image.onload = function()
{
types =
[
'source-over', 'source-in', 'source-out',
'source-atop', 'destination-over', 'destination-in',
'destination-out', 'destination-atop', 'lighter',
'darker', 'copy', 'xor'
]
for (j = 0 ; j < 12 ; ++j)
{
canvas = O('c' + (j + 1))
context = canvas.getContext('2d')
S(canvas).background = 'lightblue'
context.fillStyle = 'red'
context.arc(50, 50, 50, 0, Math.PI * 2, false)
context.fill()
context.globalCompositeOperation = types[j]
context.drawImage(image, 20, 20, 100, 100)
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Manipulating Image Data</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='640' height='200'></canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
S(canvas).background = 'lightblue'
myimage = new Image()
myimage.src = 'photo.jpg'
myimage.onload = function()
{
context.drawImage(myimage, 0, 0)
idata = context.getImageData(0, 0, myimage.width, myimage.height)
for (y = 0 ; y < myimage.height ; ++y)
{
for (x = 0 ; x < myimage.width ; ++x)
{
pos = y * myimage.width * 4 + x * 4
average =
(
idata.data[pos] +
idata.data[pos + 1] +
idata.data[pos + 2]
) / 3
idata.data[pos] = average + 50
idata.data[pos + 1] = average
idata.data[pos + 2] = average - 50
}
}
context.putImageData(idata, 320, 0)
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Adding Shadows</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='480' height='190'></canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
S(canvas).background = 'lightblue'
myimage = new Image()
myimage.src = 'apple.png'
orig = 95
points = 21
dist = Math.PI / points * 2
scale1 = 75
scale2 = 50
myimage.onload = function()
{
context.beginPath()
for (j = 0 ; j < points ; ++j)
{
x = Math.sin(j * dist)
y = Math.cos(j * dist)
context.lineTo(orig + x * scale1, orig + y * scale1)
context.lineTo(orig + x * scale2, orig + y * scale2)
}
context.closePath()
context.shadowOffsetX = 5
context.shadowOffsetY = 5
context.shadowBlur = 6
context.shadowColor = '#444'
context.fillStyle = 'red'
context.stroke()
context.fill()
context.shadowOffsetX = 2
context.shadowOffsetY = 2
context.shadowBlur = 3
context.shadowColor = 'yellow'
context.font = 'bold 36pt Times'
context.textBaseline = 'top'
context.fillStyle = 'green'
context.fillText('Sale now on!', 200, 5)
context.shadowOffsetX = 3
context.shadowOffsetY = 3
context.shadowBlur = 5
context.shadowColor = 'black'
context.drawImage(myimage, 245, 45)
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Drawing Images</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='480' height='260'></canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
S(canvas).background = 'lightblue'
myimage = new Image()
myimage.src = 'image.png'
myimage.onload = function()
{
context.drawImage(myimage, 20, 20 )
context.drawImage(myimage, 140, 20, 220, 220)
context.drawImage(myimage, 380, 20, 80, 220)
context.drawImage(myimage, 30, 30, 40, 40, 20, 140, 100, 100)
// Example of using a canvas as an image source
context.drawImage(canvas, 0, 0, 480, 260, 20, 140, 100, 100)
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Bezier Curves</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='480' height='240'></canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
S(canvas).background = 'lightblue'
context.beginPath()
context.moveTo(240, 20)
context.bezierCurveTo(720, 480, -240, -240, 240, 220)
context.stroke()
context.closePath()
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Quadratic Curves</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='480' height='240'></canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
S(canvas).background = 'lightblue'
context.beginPath()
context.moveTo(180, 60)
context.quadraticCurveTo(240, 0, 300, 60)
context.quadraticCurveTo(460, 30, 420, 100)
context.quadraticCurveTo(480, 210, 340, 170)
context.quadraticCurveTo(240, 240, 200, 170)
context.quadraticCurveTo(100, 200, 140, 130)
context.quadraticCurveTo( 40, 40, 180, 60)
context.fillStyle = 'white'
context.fill()
context.closePath()
// Illustrate the attractor points
// IE, Chrome, Opera only
// context.beginPath()
// context.moveTo(240, 0)
// context.lineTo(460, 30)
// context.lineTo(480, 210)
// context.lineTo(240, 240)
// context.lineTo(100, 200)
// context.lineTo( 40, 40)
// context.closePath()
// context.setLineDash([2,3])
// context.strokeStyle = 'green'
// context.stroke()
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>The arcTo Method</title>
<script src='OSC.js'></script>
</head>
<body>
<canvas id='mycanvas' width='480' height='240'></canvas>
<script>
canvas = O('mycanvas')
context = canvas.getContext('2d')
S(canvas).background = 'lightblue'
context.strokeStyle = 'blue'
for (j = 0 ; j <= 280 ; j += 40)
{
context.beginPath()
context.moveTo( 20, 20)
context.arcTo(240, 240, 460, 20, j)
context.lineTo(460, 20)
context.stroke()
context.closePath()
}
</script>
</body>
</html>