diff --git a/common.ts b/common.ts
index fb63275..bac9267 100644
--- a/common.ts
+++ b/common.ts
@@ -5,6 +5,8 @@ function initializeContext(canvasId: string): WebGL2RenderingContext | null {
     return ctx;
 }
 
+type Color = [number, number, number, number]
+
 class Vec2 {
     x: number;
     y: number;
@@ -78,4 +80,4 @@ class Vec3 {
     }
 }
 
-export { initializeContext, Vec2, Vec3 };
+export { initializeContext, Vec2, Vec3, Color };
diff --git a/draw.js b/draw.js
index 28d50e1..1ffc12a 100644
--- a/draw.js
+++ b/draw.js
@@ -1,5 +1,5 @@
 import { Vec2 } from "./common.js";
-function drawTriangle(gfx, positions) {
+function drawTriangle(gfx, positions, color) {
     const a_position = gfx.getAttribute("a_position");
     const a_color = gfx.getAttribute("a_color");
     const points = [
@@ -7,16 +7,16 @@ function drawTriangle(gfx, positions) {
         positions[1].x, positions[1].y,
         positions[2].x, positions[2].y,
     ];
-    const color = [
-        1, 0, 0, 1,
-        0, 1, 0, 1,
-        0, 0, 1, 1,
+    const colors = [
+        color,
+        color,
+        color,
     ];
     a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
-    a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
+    a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
     gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
 }
-function drawTriangleExts(gfx, position, exts) {
+function drawTriangleExts(gfx, position, exts, color) {
     const a_position = gfx.getAttribute("a_position");
     const a_color = gfx.getAttribute("a_color");
     const points = [
@@ -24,16 +24,16 @@ function drawTriangleExts(gfx, position, exts) {
         position.x + exts.x, position.y,
         position.x, position.y + exts.y,
     ];
-    const color = [
-        1, 0, 0, 1,
-        0, 1, 0, 1,
-        0, 0, 1, 1,
+    const colors = [
+        color,
+        color,
+        color,
     ];
     a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
-    a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
+    a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
     gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
 }
-function drawRectangle(gfx, position, exts) {
+function drawRectangle(gfx, position, exts, color) {
     const a_position = gfx.getAttribute("a_position");
     const a_color = gfx.getAttribute("a_color");
     const points = [
@@ -44,19 +44,19 @@ function drawRectangle(gfx, position, exts) {
         position.x + exts.x, position.y,
         position.x, position.y + exts.y,
     ];
-    const color = [
-        1, 0, 0, 1,
-        0, 1, 0, 1,
-        0, 0, 1, 1,
-        1, 0, 0, 1,
-        0, 1, 0, 1,
-        0, 0, 1, 1,
+    const colors = [
+        color,
+        color,
+        color,
+        color,
+        color,
+        color,
     ];
     a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
-    a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
+    a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
     gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 6);
 }
-function drawCircle(gfx, position, radius) {
+function drawCircle(gfx, position, radius, color) {
     const points = new Array();
     const precision = 40;
     const angle = 2.0 * Math.PI / precision;
@@ -71,22 +71,22 @@ function drawCircle(gfx, position, radius) {
         const current = points[i];
         const next = points[(i + 1) % points.length];
         let center = position;
-        drawTriangle(gfx, [center, center.addNew(current), center.addNew(next)]);
+        drawTriangle(gfx, [center, center.addNew(current), center.addNew(next)], color);
     }
 }
-function drawLine(gfx, A, B) {
+function drawLine(gfx, A, B, color) {
     const a_position = gfx.getAttribute("a_position");
     const a_color = gfx.getAttribute("a_color");
     let points = [
         A.x, A.y,
         B.x, B.y,
     ];
-    const color = [
-        1, 0, 0, 1,
-        0, 0, 1, 1,
+    const colors = [
+        color,
+        color,
     ];
     a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
-    a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
+    a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
     gfx.ctx.drawArrays(gfx.ctx.LINES, 0, 2);
 }
 export { drawTriangle, drawTriangleExts, drawRectangle, drawCircle, drawLine };
diff --git a/draw.ts b/draw.ts
index d59ecc0..b8917c5 100644
--- a/draw.ts
+++ b/draw.ts
@@ -1,7 +1,8 @@
 import { Vec2 } from "./common.js"
 import { Graphics } from "./graphics.js";
+import { Color } from "./common.js";
 
-function drawTriangle(gfx: Graphics, positions: [Vec2, Vec2, Vec2]) {
+function drawTriangle(gfx: Graphics, positions: [Vec2, Vec2, Vec2], color: Color) {
     const a_position = gfx.getAttribute("a_position");
     const a_color = gfx.getAttribute("a_color");
 
@@ -11,18 +12,18 @@ function drawTriangle(gfx: Graphics, positions: [Vec2, Vec2, Vec2]) {
         positions[2].x, positions[2].y,
     ]
 
-    const color: Array<number> = [
-        1, 0, 0, 1,
-        0, 1, 0, 1,
-        0, 0, 1, 1,
+    const colors: Array<number[]> = [
+        color,
+        color,
+        color,
     ];
 
     a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
-    a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
+    a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
     gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
 }
 
-function drawTriangleExts(gfx: Graphics, position: Vec2, exts: Vec2) {
+function drawTriangleExts(gfx: Graphics, position: Vec2, exts: Vec2, color: Color) {
     const a_position = gfx.getAttribute("a_position");
     const a_color = gfx.getAttribute("a_color");
 
@@ -32,18 +33,18 @@ function drawTriangleExts(gfx: Graphics, position: Vec2, exts: Vec2) {
         position.x, position.y + exts.y,
     ]
 
-    const color: Array<number> = [
-        1, 0, 0, 1,
-        0, 1, 0, 1,
-        0, 0, 1, 1,
+    const colors: Array<number[]> = [
+        color,
+        color,
+        color,
     ];
 
     a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
-    a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
+    a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
     gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
 }
 
-function drawRectangle(gfx: Graphics, position: Vec2, exts: Vec2) {
+function drawRectangle(gfx: Graphics, position: Vec2, exts: Vec2, color: Color) {
     const a_position = gfx.getAttribute("a_position");
     const a_color = gfx.getAttribute("a_color");
 
@@ -57,22 +58,22 @@ function drawRectangle(gfx: Graphics, position: Vec2, exts: Vec2) {
         position.x, position.y + exts.y,
     ]
 
-    const color: Array<number> = [
-        1, 0, 0, 1,
-        0, 1, 0, 1,
-        0, 0, 1, 1,
-        1, 0, 0, 1,
-        0, 1, 0, 1,
-        0, 0, 1, 1,
+    const colors: Array<number[]> = [
+        color,
+        color,
+        color,
+        color,
+        color,
+        color,
     ];
 
     a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
-    a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
+    a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
     gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 6);
 
 }
 
-function drawCircle(gfx: Graphics, position: Vec2, radius: number) {
+function drawCircle(gfx: Graphics, position: Vec2, radius: number, color: Color) {
     const points: Array<Vec2> = new Array<Vec2>();
 
     const precision = 40;
@@ -89,11 +90,11 @@ function drawCircle(gfx: Graphics, position: Vec2, radius: number) {
         const current = points[i];
         const next = points[(i + 1) % points.length];
         let center = position;
-        drawTriangle(gfx, [center, center.addNew(current), center.addNew(next)]);
+        drawTriangle(gfx, [center, center.addNew(current), center.addNew(next)], color);
     }
 }
 
-function drawLine(gfx: Graphics, A: Vec2, B: Vec2) {
+function drawLine(gfx: Graphics, A: Vec2, B: Vec2, color: Color) {
     const a_position = gfx.getAttribute("a_position");
     const a_color = gfx.getAttribute("a_color");
 
@@ -102,13 +103,13 @@ function drawLine(gfx: Graphics, A: Vec2, B: Vec2) {
         B.x, B.y,
     ];
 
-    const color: Array<number> = [
-        1, 0, 0, 1,
-        0, 0, 1, 1,
+    const colors: Array<number[]> = [
+        color,
+        color,
     ];
 
     a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
-    a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
+    a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
     gfx.ctx.drawArrays(gfx.ctx.LINES, 0, 2);
 }
 
diff --git a/script.js b/script.js
index da228da..be2893d 100644
--- a/script.js
+++ b/script.js
@@ -30,12 +30,11 @@ function draw(gfx) {
     const position = new Vec2(gfx.ctx.canvas.width / 2 - 100, gfx.ctx.canvas.height / 2 - 100);
     gfx.clear(0, 0, 0, 0);
     gfx.ctx.uniform2f(gfx.getUniform("u_resolution"), gfx.ctx.canvas.width, gfx.ctx.canvas.height);
-    drawing.drawRectangle(gfx, position, new Vec2(200, 200));
-    drawing.drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)]);
-    drawing.drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100));
-    drawing.drawCircle(gfx, new Vec2(400, 200), 100);
-    drawing.drawLine(gfx, new Vec2(100, 600), new Vec2(600, 600));
-    drawing.drawLine(gfx, new Vec2(0, 1), new Vec2(100, 1));
+    drawing.drawRectangle(gfx, position, new Vec2(200, 200), [0, 0, 1, 1]);
+    drawing.drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)], [1, 0, 0, 1]);
+    drawing.drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100), [0, 1, 0, 0.8]);
+    drawing.drawCircle(gfx, new Vec2(400, 200), 100, [0.7, 0.1, 0.1, 1]);
+    drawing.drawLine(gfx, new Vec2(100, 600), new Vec2(600, 600), [1, 0, 0, 1]);
 }
 (() => {
     const canvasId = "game";
diff --git a/script.ts b/script.ts
index f07d666..23df33c 100644
--- a/script.ts
+++ b/script.ts
@@ -38,12 +38,11 @@ function draw(gfx: Graphics) {
 
     gfx.clear(0, 0, 0, 0);
     gfx.ctx.uniform2f(gfx.getUniform("u_resolution"), gfx.ctx.canvas.width, gfx.ctx.canvas.height);
-    drawing.drawRectangle(gfx, position, new Vec2(200, 200))
-    drawing.drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)]);
-    drawing.drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100));
-    drawing.drawCircle(gfx, new Vec2(400, 200), 100);
-    drawing.drawLine(gfx, new Vec2(100, 600), new Vec2(600, 600));
-    drawing.drawLine(gfx, new Vec2(0, 1), new Vec2(100, 1));
+    drawing.drawRectangle(gfx, position, new Vec2(200, 200), [0, 0, 1, 1]);
+    drawing.drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)], [1, 0, 0, 1]);
+    drawing.drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100), [0, 1, 0, 0.8]);
+    drawing.drawCircle(gfx, new Vec2(400, 200), 100, [0.7, 0.1, 0.1, 1]);
+    drawing.drawLine(gfx, new Vec2(100, 600), new Vec2(600, 600), [1, 0, 0, 1]);
 }
 
 (() => {