4 canvas { border: 1px solid black; }
7 <canvas id="terminal" />
11 let websocket_location = "ws://localhost:8000"
13 function set_font(type='normal') {
14 ctx.font = type + ' ' + charHeight + "px monospace";
17 function write(start_y, start_x, msg) {
18 ctx.fillStyle = 'black';
19 ctx.fillRect(start_x*charWidth, start_y*charHeight, charWidth*msg.length, charHeight);
20 ctx.fillStyle = 'white';
21 ctx.fillText(msg, start_x*charWidth, start_y*charHeight);
24 function drawBox(start_y, start_x, height, width) {
25 ctx.fillStyle = 'black';
26 ctx.fillRect(start_x*charWidth, start_y*charHeight, charWidth*width, charHeight*height);
29 let terminal_canvas = document.getElementById("terminal");
30 let ctx = terminal_canvas.getContext("2d");
32 let charWidth = ctx.measureText("M").width;
33 ctx.canvas.height = charHeight * 24;
34 ctx.canvas.width = charWidth * 80;
35 set_font(); // ctx.font gets reset to default on canvas size change, so we have to re-set our own
36 ctx.textBaseline = "top";
38 let msg = "a b c d 0 1 2 3 4 5 6 7 8 9 i iXi i i M M M M M e f g h";
39 for (let i = 0; i < 30; i++) {
40 ctx.fillText(msg, charWidth*(1+i*2), charHeight*(1+i));
43 for (let i = 0; i < 30; i++) {
44 ctx.fillText(String(i), 0, charHeight*(i));
46 msg = "0123456789.123456789.123456789.123456789.123456789.123456789.123456789.123456789";
47 ctx.fillText(msg, 0, 0);
48 ctx.fillText('X', charWidth*78, charHeight*23);
50 write(3, 3, "hallihallo");
53 var websocket = new WebSocket(websocket_location);
54 websocket.onmessage = function (event) {
55 write(2, 2, event.data);
58 let cursor = [12, 40];
59 write(cursor[0], cursor[1], '@');
60 document.addEventListener('keydown', (event) => {
61 const keyName = event.key;
62 write(cursor[0], cursor[1], ' ');
64 case 'h': cursor[1] -= 1; break;
65 case 'j': cursor[0] += 1; break;
66 case 'k': cursor[0] -= 1; break;
67 case 'l': cursor[1] += 1; break;
68 case 'x': websocket.send('test');
70 write(cursor[0], cursor[1], '@');