Skip to content

Instantly share code, notes, and snippets.

@ueokande

ueokande/comparison_of_CSS_SVG_Canvas.html

Last active August 29, 2015 14:08
Show Gist options
  • Save ueokande/e5a7a1a23b0647a29e0f to your computer and use it in GitHub Desktop.
Save ueokande/e5a7a1a23b0647a29e0f to your computer and use it in GitHub Desktop.
Download ZIP
comparison_of_CSS/SVG/Canvas
Raw
comparison_of_CSS_SVG_Canvas.html
<!DOCTYPE HTML>
<html style='background-color:gray'>
<head>
<style>
* {
margin:0;
padding:0;
font-family: 'AppleGothic';
}
.container {
display:inline-block;
width:120px;
height:220px;
vertical-align:bottom;
box-sizing: border-box;
}
.caption {
vertical-align:bottom;
font-size: 20px;
text-align: center;
padding-top: 8px;
}
</style>
</head>
<body style='display:inline-block; margin:60px; padding:16px; background-color:white'>
<div class='container' style='position:relative'>
<div style='position:absolute; left:20px; top: 20px; width:60px; height:60px;
border: 1px solid black;'></div>
<div style='position:absolute; left:40px; top: 40px; width:60px; height:60px;
border: 1px solid black; border-radius: 50%;
background-color:#faa'></div>
<p style='position:absolute; left:10px; top:106px; font-size:11pt'>Renderer test</p>
<p style='position:absolute; left:10px; top:140px; font-size:11pt; color:blue; -webkit-transform:rotate(15deg); transform:rotate(15deg) '>Renderer test</p>
<p class='caption' style='margin-top:184px'>CSS</p>
</div><div class='container' style='margin-left:0px; border-left:1px solid gray; border-right:1px solid gray'>
<svg id='svg' width='120' height='180'>
<rect x='20.5' y='20.5' width='60' height='60' style='stroke:rgb(0,0,0);fill:none; stroke-width:1' />
<ellipse cx='70' cy='70' rx='30' ry='30' style='stroke:rgb(0,0,0);fill:#faa; stroke-width:1' />
<text x='10' y='120' fill='black' font-family='AppleGothic' font-size='11pt'>Renderer test</text>
<text x='8' y='145' fill='blue' font-family='AppleGothic' font-size='11pt' transform='rotate(15, 20, 150)'>Renderer test</text>
</svg>
<p class='caption'>SVG</p>
</div><div class='container' style='margin-left:0px'>
<canvas id='canvas' width='120' height='180'></canvas>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.lineWidth = 1;
context.font = 'normal 11pt AppleGothic'
context.strokeRect(21.5,20.5,60,60);
context.fillText('Renderer test', 11, 120);
context.beginPath()
context.arc(70, 70, 30, 0, 2 * Math.PI, false);
context.fillStyle='#faa'
context.fill();
context.stroke();
context.rotate(Math.PI / 180 * 15);
context.fillStyle = 'blue';
context.fillText('Renderer test', 46, 134);
</script>
<p class='caption'>Canvas</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment