CharCanvas.js - Draw an ASCII art using calculation processing

The more you use the special editor to draw ASCII art, the more time-consuming work will be required. I draw illustrations by combining symbols, so I will not be as flexible as paint. It will take quite a while to get used to it.

I would like to use CharCanvas.js there. Create ASCII art by calculation.

How to use CharCanvas.js

First is a single character background.

1. var cc = new CharCanvas(70, 20, '-');
2. cc.print();

Slightly customized.

1. var cc = new CharCanvas(70, 20, ['*', '+', ':']);
2. cc.print();

A circle and a square and a rugby ball.

1. var cc = new CharCanvas(70, 20, '-');
2. // 円
3. cc.fillFnc('areaCircle', '@', 16, 10, 14, 7);
4. // 四角
5. cc.fillFnc('areaRect', ['/', ':', '/'], 20, 7, 30, 7);
6. // ラグビーボール
7. var mask = cc.areaCircle(45, 10, 14, 7)
8. .opAnd(cc.areaCircle(57, 10, 14, 7));
9. cc.fillArea(mask, '*');
10. cc.print();

Crescent moon (paint, line), ring.

1. var cc = new CharCanvas(70, 20, '-');
2. // 三日月（塗り）
3. var mask = cc.areaCircle(15, 10, 14, 7)
4. .opNot(cc.areaCircle(25, 10, 14, 7));
5. cc.fillArea(mask, '@');
6. // 三日月（線）
7. var mask = cc.areaCircle(30, 10, 14, 7)
8. .opNot(cc.areaCircle(40, 10, 14, 7));
9. cc.strokeArea(mask, '@');
10. // リング
11. var mask = cc.areaCircle(50, 10, 14, 7)
12. .opNot(cc.areaCircle(50, 10, 10, 5));
13. cc.fillArea(mask, '@');
14. cc.print();

path.

1. var cc = new CharCanvas(70, 20, '-');
2. // 左
3. var x = 0;
4. var ln = cc
5. .moveTo(x + 4, 1)
6. .lineTo(x + 16, 18)
7. .lineTo(x + 22, 6)
8. .lineTo(x + 15, 12)
9. .lineTo(x + 2, 12)
10. .close();
11. cc.fillArea(ln, '@');
12. // 中央
13. var x = 22;
14. var ln = cc
15. .moveTo(x + 4, 1)
16. .lineTo(x + 16, 18)
17. .lineTo(x + 22, 6)
18. .lineTo(x + 15, 12)
19. .lineTo(x + 2, 12)
20. .close()
21. .fillPath();
22. cc.fillArea(ln, '@');
23. // 右
24. var x = 44;
25. var ln = cc
26. .areaPath(
27. x + 4, 1,
28. x + 16, 18,
29. x + 22, 8,
30. x + 15, 12,
31. x + 2, 12)
32. .fillPath();
33. cc.fillArea(ln, ['*', '+']);
34. cc.print();

character.

1. var cc = new CharCanvas(70, 20, '-');
2. cc.drawText(10, 5, 'hello world!\nThis is a CharCanvas.');
3. cc.drawTextZ(10, 10, 'こんにちは世界!!\nこれは、文字キャンバスです。');
4. cc.print();

Enlarged character.

1. var cc = new CharCanvas(70, 40, '-');
2. var mask = cc.areaText(2, -3, '顔貌', 20, 'sans-serif', 0.85, 1.7)
3. .opOr(cc.areaText(5, 17, '売人', 20, 'sans-serif', 0.85, 1.6));
4. cc.fillArea(mask, '#');
5. cc.print();

When Canvas is written in HTML 5, drawing is done, but CharCanvas.js outputs ASCII art. You can draw various shapes by combining lines and curves or drawing characters. It is software that is likely to make various applications.

CharCanvas.js is JavaScript open source software (MIT License).

masakazu-yanai/char-canvas: Draw Tool for Ascii Art.