Canvas Language for HTML5 canvas programming animations

Create animations...
on a web page, not behind it.

Animation Editor for GIF, Games, and Anything

Animations on any site, on any platform

create routine as Start
	launch Null
	set parent=Null
	launch bird
end
create sprite from bird.png as bird
	where x=300 y=-240
	having alt=BirdWait
end
create wait as BirdWait
	where delay=500 completion=FlyDown
end
create translation as FlyDown
	where x=100 y=35 speed=700 easeout=40 completion=Landed
end
create routine as Landed
	launch box
	update sprite bird bringtotop
end
create sprite from birdbox.png as box
	where x=123 y=43 alpha=0
	having alt=(sub create fade where rate=2 until=1 completion=DoneBox end) and
	alt=(sub create wait where delay=1900 completion=UrlIn end)
end
create routine as DoneBox
	launch LetterS
	launch LetterC
	launch LetterL
end
create sprite from scl-s.png as LetterS
	where x=240 y=-100
	having alt=(sub
		create translation
			where x=240 y=39 speed=500
		end)
end
create sprite from scl-c.png as LetterC
	where x=307 y=-300 having alt=(sub
		create translation
			where x=307 y=39 speed=500
		end)
end
create sprite from scl-l.png as LetterL
	where x=380 y=-500 having alt=(sub
		create translation
			where x=380 y=38 speed=500
		end)
end
create sprite as Null where size=.65 x=190 y=60 end
create routine as UrlIn
	launch Url
end
create sprite from structuredcanvaslanguage.png as Url
	where x=240 y=216 having alt=(sub
		create translation
			where x=240 y=116 speed=250 completion=UrlAppearDone
		end)
end
create routine as UrlAppearDone
	launch Com
end
create sprite from com.png as Com
	where x=521 y=115
	having
	alt=(sub create translation as ComAppear where x=437 y=115 easeout=30 speed=300 end)
	alt=(sub create wait where delay=2000 completion=(sub
	create routine
		insert into Null where alt=(sub create fade where rate=-1 until=0 completion=(sub
			create routine reset all Start()
			end)
		end)
	end) end)
end

What does Canvas Language look like?

Canvas Language can be entered in the source of a web page, or entered by users into a textarea. Either way, it's as simple as this example. Here, a sprite is created from an image and assigned a basic rotation.

For interactive examples, please visit our Gif web site.

create sprite from img.png as S where center=auto x=50 y=50 having alt=(sub create rotation end) end create routine as Start launch S end

Animations for HTML

Structured Canvas Language - SCL Animation is sprite based animation. Instead of animating HTML elements, you upload and animate images. Sprite animation is powerful, and so is SCL. It can create everything from simple animations to games.

Interactive User Engagement

What does Canvas Language look like?

Animations for HTML

Coming Soon, for