Clock

Canvas Clock

title:	Clock

DomImage(dom/image),DomQuerySelector(dom/querySelector),DomSetHtml(dom/setHtml),CanvasGetContext(canvas/getContext),CanvasDrawImage(canvas/drawImage),DomQuerySelector2(dom/querySelector),MathDegreesToRadians(math/degreesToRadians),DateCreate(date/create),DateGetSeconds(date/getSeconds),CanvasBeginPath(canvas/beginPath),CanvasMoveTo(canvas/moveTo),CanvasLineTo(canvas/lineTo),CanvasLineTo2(canvas/lineTo),CanvasLineTo3(canvas/lineTo),CanvasLineTo4(canvas/lineTo),CanvasStroke(canvas/stroke),MathMultiply(math/multiply),CanvasRotate(canvas/rotate),CanvasSetAttributes(canvas/setAttributes),CanvasFill(canvas/fill),CanvasTranslate(canvas/translate),UtilWait(util/wait),ConsoleLog(console/log),CanvasStrokeText(canvas/strokeText),CanvasSave(canvas/save),ConsoleLog2(console/log),DomAddMouseEvent(dom/addMouseEvent),DomAlert(dom/alert),DateCreate2(date/create),CanvasRestore(canvas/restore),CanvasSetAttributes2(canvas/setAttributes),SoundAlert(sound/alert)


"http://www.dhtmlgoodies.com/tutorials/canvas-clock/images/Clock_Face_2_by_AGF81.png" -> @src DomImage 

"body" -> @selector DomQuerySelector 

"<canvas height=\"450\" width=\"450\"></canvas>" -> @html DomSetHtml 

{
  "dx": -225,
  "dy": -225,
  "dw": 450,
  "dh": 450
} -> @in CanvasDrawImage 

"canvas" -> @selector DomQuerySelector2 

{
  "x": 0,
  "y": 0
} -> @in CanvasMoveTo 

{
  "x": -4,
  "y": -10
} -> @in CanvasLineTo 

{
  "x": 0,
  "y": -150
} -> @in CanvasLineTo2 

{
  "x": 4,
  "y": -10
} -> @in CanvasLineTo3 

{
  "x": 0,
  "y": 0
} -> @in CanvasLineTo4 

6 -> @y MathMultiply 

{
  "fillStyle": "blue",
  "globalAlpha": 0.8,
  "globalCompositeOperation": "destination-atop",
  "lineCap": "butt",
  "lineJoin": "miter",
  "lineWidth": 5,
  "shadowBlur": 0.8,
  "shadowColor": "green",
  "strokeStyle": "yellow",
  "textAlign": "start",
  "textBaseline": "top"
} -> @in CanvasSetAttributes 

{
  "x": 225,
  "y": 225
} -> @in CanvasTranslate 

1000 -> @timeout UtilWait 

"Rob Halff" -> @text CanvasStrokeText 

-40 -> @x CanvasStrokeText 

-40 -> @y CanvasStrokeText 

true -> @preventDefault DomAddMouseEvent 

"click" -> @event DomAddMouseEvent 

{
  "globalCompositeOperation": "destination-over",
  "lineCap": "butt",
  "lineJoin": "miter",
  "textAlign": "start",
  "textBaseline": "top"
} -> @in CanvasSetAttributes2 

"morse" -> @sound SoundAlert 

0.1 -> @volume SoundAlert 

DomQuerySelector selection -> element DomSetHtml
DomImage image -> ^element CanvasDrawImage
DomSetHtml element -> element DomQuerySelector2
DomQuerySelector2 selection -> canvas CanvasGetContext
DateCreate out -> date DateGetSeconds
CanvasMoveTo context -> context CanvasLineTo
CanvasLineTo context -> context CanvasLineTo2
CanvasLineTo2 context -> context CanvasLineTo3
CanvasLineTo3 context -> context CanvasLineTo4
MathDegreesToRadians out -> angle CanvasRotate
CanvasLineTo4 context -> context CanvasFill
CanvasFill context -> context CanvasStroke
CanvasGetContext context -> context CanvasTranslate
CanvasTranslate context -> context CanvasDrawImage
CanvasDrawImage context -> context CanvasStrokeText
DateGetSeconds out -> x MathMultiply
MathMultiply out -> in MathDegreesToRadians
MathMultiply out -> msg ConsoleLog
DomQuerySelector2 selection -> element DomAddMouseEvent
DomAddMouseEvent event -> msg ConsoleLog2
DomAddMouseEvent event -> message DomAlert
DateGetSeconds out -> in UtilWait
UtilWait out -> :start DateCreate2
DateCreate2 out -> date DateGetSeconds
DateCreate2 out -> :start DateGetSeconds
DateCreate out -> :start DateGetSeconds
CanvasBeginPath context -> context CanvasRotate
CanvasRotate context -> context CanvasMoveTo
CanvasStroke context -> context CanvasRestore
CanvasStrokeText context -> context CanvasSave
CanvasSave context -> context CanvasSetAttributes
CanvasSetAttributes context -> context CanvasBeginPath
CanvasRestore context -> context CanvasSetAttributes2
CanvasSetAttributes2 context -> context CanvasDrawImage
UtilWait out -> :start SoundAlert