線を描く（Canvas と SVG）

figure [basic] | CreateJS
figure [basic] | Snap.svg
figure [basic] | GraphicsJS

Canvas上に図形を描く「CreateJS」
SVGとして図形を描く「Snap.svg」と「GraphicsJS」

それぞれのライブラリで、
線の太さ1px, 2px の直線・二等辺三角形・長方形・円を描いてみた。

iPad で見ると、1px の直線でも、SVGは綺麗に表示されてた。
あと、テキストも SVG の方が綺麗かも。

[CreateJS]

var canvas = document.getElementById("canvas");
var stage = new createjs.Stage(canvas);

//太さ1の直線
var line1 = new createjs.Shape();
stage.addChild(line1);
line1.x = 80;
line1.y = 180;
line1.graphics.setStrokeStyle(1);
line1.graphics.beginStroke("#FFFFFF");
line1.graphics.moveTo(0, -60);
line1.graphics.lineTo(0, 60);
line1.graphics.endStroke();
//太さ2の直線
var line2 = new createjs.Shape();
stage.addChild(line2);
line2.x = 80;
line2.y = 360;
line2.graphics.setStrokeStyle(2);
line2.graphics.beginStroke("#FFFFFF");
line2.graphics.moveTo(0, -60);
line2.graphics.lineTo(0, 60);
line2.graphics.endStroke();
//太さ1の二等辺三角形
var triangle1 = new createjs.Shape();
stage.addChild(triangle1);
triangle1.x = 240;
triangle1.y = 180;
triangle1.graphics.setStrokeStyle(1);
triangle1.graphics.beginStroke("#FFFFFF");
triangle1.graphics.moveTo(0, -60);
triangle1.graphics.lineTo(-60, 60);
triangle1.graphics.lineTo(60, 60);
triangle1.graphics.lineTo(0, -60);
triangle1.graphics.endStroke();
//太さ2の二等辺三角形
var triangle2 = new createjs.Shape();
stage.addChild(triangle2);
triangle2.x = 240;
triangle2.y = 360;
triangle2.graphics.setStrokeStyle(2);
triangle2.graphics.beginStroke("#FFFFFF");
triangle2.graphics.moveTo(0, -60);
triangle2.graphics.lineTo(-60, 60);
triangle2.graphics.lineTo(60, 60);
triangle2.graphics.lineTo(0, -60);
triangle2.graphics.endStroke();
//太さ1の長方形
var rectangle1 = new createjs.Shape();
stage.addChild(rectangle1);
rectangle1.x = 480;
rectangle1.y = 180;
rectangle1.graphics.setStrokeStyle(1);
rectangle1.graphics.beginStroke("#FFFFFF");
rectangle1.graphics.drawRect(-80, -60, 160, 120);
rectangle1.graphics.endStroke();
//太さ2の長方形
var rectangle2 = new createjs.Shape();
stage.addChild(rectangle2);
rectangle2.x = 480;
rectangle2.y = 360;
rectangle2.graphics.setStrokeStyle(2);
rectangle2.graphics.beginStroke("#FFFFFF");
rectangle2.graphics.drawRect(-80, -60, 160, 120);
rectangle2.graphics.endStroke();
//太さ1の円
var circle1 = new createjs.Shape();
stage.addChild(circle1);
circle1.x = 700;
circle1.y = 180;
circle1.graphics.setStrokeStyle(1);
circle1.graphics.beginStroke("#FFFFFF");
circle1.graphics.drawCircle(0, 0, 60);
circle1.graphics.endStroke();
//太さ2の円
var circle2 = new createjs.Shape();
stage.addChild(circle2);
circle2.x = 700;
circle2.y = 360;
circle2.graphics.setStrokeStyle(2);
circle2.graphics.beginStroke("#FFFFFF");
circle2.graphics.drawCircle(0, 0, 60);
circle2.graphics.endStroke();
//テキスト
var label = new createjs.Text("figure [basic]", "24px Myriad Pro", "#FFFFFF");
stage.addChild(label);
label.textAlign = "center";
label.textBaseline = "bottom";
label.x = canvas.width/2;
label.y = 65;
label.alpha = 0.6;

stage.update();

[Snap.svg]

var canvas = Snap("#canvas");
var stage = Snap(800, 480);
canvas.add(stage);

//太さ1の直線
var line1 = stage.line(80, 120, 80, 240).attr({stroke: "#FFFFFF", strokeWidth: 1});
//太さ2の直線
var line2 = stage.line(80, 300, 80, 420).attr({stroke: "#FFFFFF", strokeWidth: 2});
//太さ1の二等辺三角形
var triangle1 = stage.polygon(240, 120, 180, 240, 300, 240).attr({fill: "none", stroke: "#FFFFFF", strokeWidth: 1});
//太さ2の二等辺三角形
var triangle2 = stage.polygon(240, 300, 180, 420, 300, 420).attr({fill: "none", stroke: "#FFFFFF", strokeWidth: 2});
//太さ1の長方形
var rectangle1 = stage.rect(400, 120, 160, 120).attr({fill: "none", stroke: "#FFFFFF", strokeWidth: 1});
//太さ2の長方形
var rectangle2 = stage.rect(400, 300, 160, 120).attr({fill: "none", stroke: "#FFFFFF", strokeWidth: 2});
//太さ1の円
var circle1 = stage.circle(700, 180, 60).attr({fill: "none", stroke: "#FFFFFF", strokeWidth: 1});
//太さ2の円
var circle2 = stage.circle(700, 360, 60).attr({fill: "none", stroke: "#FFFFFF", strokeWidth: 2});
//テキスト
var label = stage.text(400, 59, "figure [basic]");
label.attr({fontSize: "24px", fill: "#FFFFFF", fontFamily: "Myriad Pro", opacity: 0.6, textAnchor: "middle"});

[GraphicsJS]

var stage = acgraph.create("canvas");

//太さ1の直線
var line1 = stage.path().stroke("#FFFFFF", 1);
line1.moveTo(80, 120).lineTo(80, 240).close();
//太さ2の直線
var line2 = stage.path().stroke("#FFFFFF", 2);
line2.moveTo(80, 300).lineTo(80, 420).close();
//太さ1の二等辺三角形
var triangle1 = stage.path().stroke("#FFFFFF", 1);
triangle1.moveTo(240, 120).lineTo(180, 240, 300, 240).close();
//太さ2の二等辺三角形
var triangle2 = stage.path().stroke("#FFFFFF", 2);
triangle2.moveTo(240, 300).lineTo(180, 420, 300, 420).close();
//太さ1の長方形
var rectangle1 = stage.rect(400, 120, 160, 120).stroke("#FFFFFF", 1);
//太さ2の長方形
var rectangle2 = stage.rect(400, 300, 160, 120).stroke("#FFFFFF", 2);
//太さ1の円
var circle1 = stage.circle(700, 180, 60).stroke("#FFFFFF", 1);
//太さ2の円
var circle2 = stage.circle(700, 360, 60).stroke("#FFFFFF", 2);
//テキスト
var label = stage.text(200, 41, "figure [basic]", {width: "400px", fontSize: "24px", fontFamily: "Myriad Pro", color: "#FFFFFF", opacity: "0.6"});
label.hAlign("center");